相关链接
- webpack4详细教程，从无到有搭建react脚手架（一）
- webpack4详细教程，从无到有搭建react脚手架（二）
- webpack4详细教程，从无到有搭建react脚手架（三）
管理打包后目录结构
打包结构如下
build/ js/ xxx.js css/ xxx.css images/ xxx.jpg index.html修改配置
config/webpack.common.js
function webpackCommonConfigCreator(options){ ... return { ... output: { - filename: "bundle.js", + filename: "js/bundle.js", path: path.resolve(__dirname, "../build"), }, module: { rules: [ ... { test: /\.(jpg|png|svg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 10240, - name: '[hash].[ext]', + name: 'images/[hash].[ext]', } }, ] }, ] }, plugins: [ ... new ExtractTextPlugin({ - filename: "[name][hash].css" + filename: "css/[name][hash].css" }), ] } }通过相对output目录对资源命名前加上目录名
yarn build， 效果：
后面的步骤在这里需要安装一个大型的包，以Ant-design为例
安装
yarn add antd为第三方包配置css解析，将样式表直接导出
config/webpack.common.js
... modules: { rules: [ { test: /\.(css|scss)$/, include: path.resolve(__dirname, '../src'), use: ExtractTextPlugin.extract({ ... }) }, + { + test: /\.(css|scss)$/, + exclude: path.resolve(__dirname, '../src'), + use: [ + "style-loader/url", + { + loader: 'file-loader', + options: { + name: "css/[name].css" + } + } + ] + }, ] } ...使用antd组件
引入antd样式表
src/index.js
import React from 'react'; import ReactDom from 'react-dom'; import App from './App.js'; + import 'antd/dist/antd.css'; ReactDom.render(<App />, document.getElementById('root'));创建目录 src/component
src/component/Btn.js
import React from 'react'; import {Button} from 'antd'; export default function Btn(){ return ( <div> <Button type="danger">click me2</Button> </div> ) }引入组件
src/App.js
+ import Btn from './components/Btn'; function App(){ return ( <div className={styles.title}> ... + <Btn /> </div> ) } ...yarn start，成功, 但是bundle.js体积非常的大，需要优化
分割bundle
配置
对chunks属性我在一个思否回答中答了答案，链接： https://segmentfault.com/q/10...
config/webpack.common.js
function webpackCommonConfigCreator(options){ return { ... output: { - filename: "js/bundle.js", + filename: "js/[name].js", path: path.resolve(__dirname, "../build"), }, ... + optimization: { + splitChunks: { + chunks: "all", + minSize: 50000, + minChunks: 1, + } + } } }yarn build， 打包如下
缓存
为了在每次修改代码后，浏览器都能获取到最新的js，通常会对output的名添加hash值
config/webpack.common.js
output: { - filename: "js/[name].js", + filename: "js/[name][hash].js", path: path.resolve(__dirname, "../build"), },效果
yarn build
修改开发代码后再次打包
可以看到修改代码后，打包的js文件名hash值变了，浏览器请求总能够获取到最新的代码
但是分割出来的antd和react的代码没有变化，名字也变了，则浏览器也会再次请求这个模块，应该没有发生改变的模块保持名称以使浏览器从缓存中获取，在生产模式下使用[chunkhash]替代[hash]
config/webpack.common.js
output: { - filename: "js/[name][hash].js", path: path.resolve(__dirname, "../build"), },config/webpack.prod.js
+ output: { + filename: "js/[name][chunkhash].js", + },config/webpack.dev.js
+ output: { + filename: "js/[name][hash].js", + },效果
yarn build
修改开发代码后再次打包
配置source-map和manifest.json
在打包后的文件中，如果出现异常，堆栈追踪异常不能定位到打包前的单个文件，所以使用source-map。官方推荐开发模式下使用inline-source-map, 生产模式使用source-map
config/webpack.dev.js
const config = { ... + devtool: "inline-source-map", ... }config/webpack.prod.js
const config = { ... + devtool: "source-map", ... }manifest
安装
yarn add webpack-manifest-plugin -D配置
config/webpack.prod.js
... const ManifestPlugin = require('webpack-manifest-plugin'); const config = { ... plugins: [ ... new ManifestPlugin(), ] }配置公共路径
当我们使用vue-cli或者create-react-app脚手架打包项目后，未修改publicPath的情况下直接打开index.html会报错无法找到js、css静态资源
因为脚手架默认的publicPath设置为 /，则对应的资源外链都是从服务器路径/开始寻找资源
配置
config/webpack.common.js
function webpackCommonConfigCreator(options){ return { ... output: { ... + publicPath: "/" }, ... module: { rules: [ ... { test: /\.(jpg|png|svg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 10240, name: 'images/[hash].[ext]', + publicPath: "/" } }, ] }, ] } } }yarn build, 打包完成后推荐使用http-server
yarn global add http-server npm install http-server -ghttp-server build
源码github仓库： https://github.com/tanf1995/W...