webpack4详细教程，从零开始搭建react脚手架（四）
相关链接webpack4详细教程，从零搭建react脚手架（一）webpack4详细教程，从零搭建react脚手架（二）webpack4详细教程，从零搭建react脚手架（三）管理打包目录结构package结构如下build/js/xxx.jscss/xxx.cssimages/xxx.jpgindex.html修改配置config/webpack.common.jsfunctionwebpackCommonConfigCreator(options){...return{...output:{-filename:"bundle.js",+文件名:"js/bundle.js",路径:path.resolve(__dirname,"../build"),},模块:{规则:[...{test:/\.(jpg|png|svg|gif)$/,使用:[{loader:'url-loader',options:{limit:10240,-name:'[hash].[ext]',+name:'images/[hash].[ext]',}},]},]},插件:[...newExtractTextPlugin({-filename:"[name][hash].css"+filename:"css/[name][hash].css"}),]}}在通过相对输出目录命名资源之前添加目录名yarnbuild，效果：下面的步骤需要在这里安装一个大包。以Ant-design为例安装yarnaddantd为第三方包配置css解析，将样式表直接导出到config/webpack.common.js...modules:{rules:[{test:/\.(css|scss)$/，包括：path.resolve(__dirname,'../src')，使用：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.jsimportReactfrom'react';从'react-dom'导入ReactDom；从'./App.js'导入应用程序；+导入'antd/dist/antd.css';ReactDom.render(,document.getElementById('root'));创建目录src/componentsrc/component/Btn.jsimportReactfrom'react';从'antd'导入{Button}；导出默认值functionBtn(){return(
clickme2
)}importcomponentsrc/App.js+importBtnfrom'./components/Btn';functionApp(){return(
...+ )}...yarn启动成功，但是bundle.js很大，需要优化对于分段，我回答了bundle配置中chunks属性的答案，链接：https://segmentfault.com/q/10...config/webpack.common.jsfunctionwebpackCommonConfigCreator(options){return{...output:{-文件名：“js/bundle.js”，+文件名：“js/[name].js”，路径：path.resolve(__dirname,"../build"),},...+optimization:{+splitChunks:{+chunks:"all",+minSize:50000,+minChunks:1,+}+}}}yarnbuild，打包如下缓存，让浏览器每次代码都可以获取到修改为最新的js，通常在输出的name中加上hash值config/webpack.common.jsoutput:{-filename:"js/[name].js",+filename:"js/[name][hash].js",path:path.resolve(__dirname,"../build"),},效果：yarnbuild修改开发代码，重新打包。可以看到修改代码后，打包后的js文件名的hash值发生了变化，浏览器请求总能获取到最新的代码，但是分离出来的antd和react代码没有变，名字变了，所以浏览器会再次请求这个模块。不应该更改的模块应该保留名称以便浏览器可以从缓存中获取它，在生产模式下使用[chunkhash]而不是[hash]config/webpack.common.jsoutput:{-filename:"js/[名称][哈希].js",路径:path.resolve(__dirname,"../build"),},config/webpack.prod.js+输出:{+文件名:"js/[名称][chunkhash.js",+},config/webpack.dev.js+输出：{+filename:"js/[name][hash].js",+},effectyarnbuild修改开发代码然后在打包文件中打包配置source-map和manifest.json，如果出现异常，thestacktrace异常在打包前无法定位到单个文件中，所以使用了source-map。官方推荐开发模式使用inline-source-map，生产模式使用source-mapconfig/webpack.dev.jsconstconfig={...+devtool:"inline-source-map",...}配置/网络包。prod.jsconstconfig={...+devtool:"source-map",...}manifestinstallyarnaddwebpack-manifest-plugin-D配置配置/webpack.prod.js...constManifestPlugin=require('webpack-manifest-plugin');constconfig={...plugins:[...newManifestPlugin(),]}配置public路径当我们使用vue-cli或者create-react-app脚手架打包项目时，没有修改publicPath的时候，直接打开index.html会报找不到js和css静态资源的错误。因为脚手架默认的publicPath设置为/，对应的资源外链都是从服务器路径/中搜索资源配置config/webpack.common。js函数webpackCommonConfigCreator(options){return{...output:{...+publicPath:"/"},...module:{rules:[...{test:/\.(jpg|png|svg|gif)$/,使用:[{loader:'url-loader',options:{limit:10240,name:'images/[hash].[ext]',+publicPath:"/"}},]},]}}}yarn构建，建议使用http-serveryarnglobal打包完成后添加http-servernpminstallhttp-server-ghttp-server构建源码github仓库：https://github.com/tanf1995/W...
