// webpack.prod.conf.js const merge = require('webpack-merge'); const baseWebpackConfig = require('./webpack.base.conf.js'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = merge(baseWebpackConfig, { mode: 'production', output: { filename: "js/[name].[chunkhash:16].js", }, plugins: [ new HtmlWebpackPlugin({ template: 'public/index.html', inject: 'body', minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, }), new CleanWebpackPlugin(['../dist'], { allowExternal: true }) ] });
公共代码与业务代码分离
修改 webpack.base.conf.js 的 entry 入口属性，抽出框架代码
entry: { app: './app/index.js', framework: ['react','react-dom'], },
修改webpack.prod.conf.js，增加以下代码，目的是分离框架代码和业务代码
虽然上面步骤抽出框架代码生成两个文件，但是app.js还是包含框架代码
optimization: { splitChunks: { chunks: "all", minChunks: 1, minSize: 0, cacheGroups: { framework: { test: "framework", name: "framework", enforce: true } } } }
cacheGroups对象，定义了需要被抽离的模块
其中test属性是比较关键的一个值，他可以是一个字符串，也可以是正则表达式，还可以是函数。如果定义的是字符串，会匹配入口模块名称，会从其他模块中把包含这个模块的抽离出来
name是抽离后生成的名字，和入口文件模块名称相同，这样抽离出来的新生成的framework模块会覆盖被抽离的framework模块
整合 webpack-dev-server
开发环境开启服务监听文件改动实时更新最新内容
$ npm install --save-dev webpack-dev-server
在build中添加webpack.dev.conf.js文件
const path = require('path'); const merge = require('webpack-merge'); const baseWebpackConfig = require('./webpack.base.conf.js'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); module.exports = merge(baseWebpackConfig, { mode: 'development', output: { filename: "js/[name].[hash:16].js", }, plugins: [ new HtmlWebpackPlugin({ template: 'public/index.html', inject: 'body', minify: { html5: true }, hash: false }), new webpack.HotModuleReplacementPlugin() ], devServer: { port: '8080', contentBase: path.join(__dirname, '../public'), compress: true, historyApiFallback: true, hot: true, https: false, noInfo: true, open: true, proxy: {} } });
在package.json scripts属性添加内容
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
npm run dev
自动打开浏览器打开入口页面实时更新
独立导出 css 文件
安装css相关依赖
sass less 预处理
$ npm install extract-text-webpack-plugin $ npm install style-loader css-loader postcss-loader autoprefixer --save-dev $ npm install less sass less-loader sass-loader stylus-loader node-sass --save-dev
webpack.base.conf.js 文件修改
// webpack.base.conf.js { test: /\.css$/, use: [ { loader: "style-loader" //在html中插入<style>标签 }, { loader: "css-loader",//获取引用资源，如@import,url() }, { loader: "postcss-loader", options: { plugins:[ require('autoprefixer')({ browsers:['last 5 version'] }) ] } } ] }, { test:/\.less$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "postcss-loader",//自动加前缀 options: { plugins:[ require('autoprefixer')({ browsers:['last 5 version'] }) ] } }, { loader: "less-loader" } ] }, { test:/\.scss$/, use:[ { loader: "style-loader" }, { loader: "css-loader", }, { loader: "sass-loader" }, { loader: "postcss-loader", options: { plugins:[ require('autoprefixer')({ browsers:['last 5 version'] }) ] } } ] },
图片和路径处理
$ npm i file-loader url-loader --save-dev
webpack.base.conf.js 文件修改
// webpack.base.conf.js { test: /\.(png|jpg|gif|woff|svg|eot|woff2|tff)$/, use: 'url-loader?limit=8129', //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片 exclude: /node_modules/ }
build 时报错
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (F:\react\createApp\node_modules\webpack\lib\Chunk.js:824:9)
webpack4.0中使用“extract-text-webpack-plugin”报错
解决办法
$ npm install extract-text-webpack-plugin@next
背景图片路径问题
由于css文件分离出来的原因，会导致在css文件夹下找images文件夹下的图片
解决办法 publicPath属性改为 'https://www.jb51.net/'，以绝对路径的方式寻找资源