module: { rules: [{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [ 'css-loader', { loader: 'postcss-loader', options: { sourceMap: true } } ] }) }] },
这样的话,我们开发环境不影响依旧是之前到模式,build的时候用ExtractTextPlugin帮我们分离非js文件,实现css的分离打包
我们打包一下试试npm run build
分离js文件
接下来是分离js文件,就是将库文件以及我们的代码分离开,利于上线后的浏览器缓存,代码会经常变,库不会经常变
在webpack4之前js分离用的插件是CommonsChunkPlugin,不过这插件现在移除了,现在用的是optimization.splitChunks 来进行公共代码与第三方代码的提取,splitChunks参数如下
optimization: { splitChunks: { chunks: "initial", // 代码块类型 必须三选一： "initial"（初始化） | "all"(默认就是all) | "async"（动态加载） minSize: 0, // 最小尺寸，默认0 minChunks: 1, // 最小 chunk ，默认1 maxAsyncRequests: 1, // 最大异步请求数， 默认1 maxInitialRequests: 1, // 最大初始化请求书，默认1 name: () => {}, // 名称，此选项课接收 function cacheGroups: { // 缓存组会继承splitChunks的配置，但是test、priorty和reuseExistingChunk只能用于配置缓存组。 priority: "0", // 缓存组优先级 false | object | vendor: { // key 为entry中定义的 入口名称 chunks: "initial", // 必须三选一： "initial"(初始化) | "all" | "async"(默认就是异步) test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk name: "vendor", // 要缓存的 分隔出来的 chunk 名称 minSize: 0, minChunks: 1, enforce: true, reuseExistingChunk: true // 可设置是否重用已用chunk 不再创建新的chunk } } } }
官方包括这解释,我并不是很看懂,所以打包策略并不是很好
在webpack.config.build.js>config
output: { filename: '[name].[chunkhash:8].js' }, optimization: { splitChunks: { chunks: "all", cacheGroups: { vendor: { test: /node_modules/, //这里虽然分离了,但是没有做到按需引入,看官方配置也不是很明白 name: 'vendors', chunks: 'all' } } }, runtimeChunk: true }
build一下查看目录,可以看出代码与库之间分离了
关于eslint,我就不引入的,有兴趣可以讨论一下
.gitignore
这里处理一下git 新建文件.gitignore
.DS_Store node_modules/ /dist/ npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln .editorconfig,
处理一下编译器的统一配置
新建文件 .editorconfig,(关于editorconfig,以及配置解释)
root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true
还有一点要注意,假如没有效果,vscode需要安装一个插件EditorConfig for VS Code,其他编译器不太清楚
.babelrc
处理一下ES6,以及js文件的webpack的loader配置
今天装了babel-loader8.0.0 报错报一上午,心态都搞崩了,所以这里我使用的是7版本
npm install babel-loader@7 babel-core babel-preset-env -D
在webpack.config.base.js>module>rules里面添加代码
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
新建文件 .babelrc
{ "presets": [ "env" ] }
首先检查开发环境
我新建了一个es6语法的js 导入到app.vue里面
运行结果
最后