趁工作之余从零构建了一个webpack4.x多页面应用程序。过程中也遇到一些坑，就记录下来了。
webpack核心概念
Entry：入口，Webpack 执行构建的第一步将从 Entry 开始。
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
项目的运行主要围绕的就是这几大块
首先看一下构建后目录
├── build │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ ├── webpack.prod.conf.js │ ├── webpack.rules.conf.js ├── src │ ├── css │ ├── js │ ├── images │ ├── assets │ ├── pages │ │ ├── index │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── index.scss │ │ ├── login │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── index.scss
1.多页面的入口文件
修改 webpack.base.conf.js代码
entry: { // 多入口文件 index: ['./src/pages/index/index.js',], login: './src/pages/login/index.js', },
2.配置开发服务器
npm install webpack-dev-server --save-dev //修改 webpack.dev.conf.js代码 devServer: { contentBase: path.join(__dirname, "../dist"), publicPath:'https://www.jb51.net/', host: "127.0.0.1", port: "8089", overlay: true, // 浏览器页面上显示错误 // open: true, // 开启自动打开浏览器 // stats: "errors-only", //stats: "errors-only"表示只打印错误： hot: true // 开启热更新 }, //修改package.json scripts: { "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js", "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js", "server": "live-server ./ --port=8888" },
3.配置loader
{ test: /\.(css|scss|sass)$/, // 不分离的写法 // use: ["style-loader", "css-loader",sass-loader"] // 使用postcss不分离的写法 // use: ["style-loader", "css-loader", sass-loader","postcss-loader"] // 此处为分离css的写法 /*use: extractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", "sass-loader"], // css中的基础路径 publicPath: "../" })*/ // 此处为使用postcss分离css的写法 use: extractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", "sass-loader", "postcss-loader"], // css中的基础路径 publicPath: "../" }) }, { test: /\.js$/, use: ["babel-loader"], // 不检查node_modules下的js文件 exclude: "/node_modules/" }, { test: /\.(png|jpg|gif)$/, use: [{ // 需要下载file-loader和url-loader loader: "url-loader", options: { limit: 5 * 1024,//小于这个时将会已base64位图片打包处理 // 图片文件输出的文件夹 outputPath: "images" } }] }
4.从js中分离css
npm install extract-text-webpack-plugin --save-dev //这个插件在webpack4.x 运行时会有点问题,后面会提到 //修改 webpack.base.conf.js代码 // 分离css插件参数为提取出去的路径 new extractTextPlugin({ filename: 'css/[name].[hash:8].min.css', }), 5.处理css3属性前缀，消除冗余的css代码并压缩css //属性自动加前缀 npm install postcss-loader --save-dev //在根目录新建postcss.config.js module.exports = { plugins: [ require('autoprefixer')//自动添加css前缀 ] }; //loader里加入postcss { test: /\.(css|scss|sass)$/, // 此处为使用postcss分离css的写法 use: extractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", "sass-loader", "postcss-loader"], // css中的基础路径 publicPath: "../" }) } //修改package.json 加入css要兼容浏览器版本的代码 "browserslist": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "iOS 7", "last 3 iOS versions" ] //消除冗余css代码 使用glob模块去匹配文件所以还要安装glob模块 npm install purifycss-webpack --save-dev new purifyCssWebpack({ paths: glob.sync(path.join(__dirname, "../src/pages/*/*.html")) }), //压缩css npm install optimize-css-assets-webpack-plugin --save-dev //压缩css //修改 webpack.prod.conf.js代码 new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }),
5.清空打包目录
npm install clean-webpack-plugin --save-dev //修改 webpack.prod.conf.js代码 //删除dist目录 new cleanWebpackPlugin(['dist'], { root: path.resolve(__dirname, '../'), //根目录 // verbose Write logs to console. verbose: true, //开启在控制台输出信息 // dry Use boolean "true" to test/emulate delete. (will not remove files). // Default: false - remove files dry: false, }),
6. 压缩js