webpack4 vue全家桶 SPA单页应用构建案例
一直以来,对于webpack<=3来进行构建,还是比较得心应手的,然而随时技术的更新,webpack4出来了,紧随步伐,那就开始写一个webpack4的构建脚手架吧, 于是...开始了基于vue的webpack4单页构建脚手架的开发了。
1. webpack4的几大组成部分
Entry:入口,Webpack的入口文件,可以为String,Array,Object。
Output:出口,输出的最终结果,里面可以配置path、publicPath、filename、chunkFilenamet等。
Module:模块,在 Webpack 里一切皆模块,配置处理各种文件所需要的loader。
optimization:主要是做webpack3当中commonchunk所做的事件,可实现代码分离、提取公共模块等,配置更灵活也是最为复杂的一部分。
Plugin:包括内置插件及第三方插件,直接对整个构建过程起作用。
2. 目录结构
├── build
│ ├── config.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ ├── webpack.prod.conf.js
│ ├── webpack.vendor.conf.js
├── src
│ ├── components
│ ├── router
│ ├── assets
│ ├── App.vue
│ ├── main.js
│ ├── index.html
│ ├── pages
│ │ ├── accRentIncome
│ │ │ ├── images
│ │ │ ├── App.vue
│ │ │ └── index.css
│ │ ├── login
│ │ │ ├── images
│ │ │ ├── App.vue
│ │ │ └── index.css
3. spa的入口文件
entry: { main: [ path.resolve(__dirname, '../src/main.js'), ], }
4. 配置出口
output: { path: path.resolve("./dist"), filename: '[name].[hash:10].js', chunkFilename: '[name].chunk.js' }
5. config文件
module.exports = {
outputBase: './dist',
port: 8091,
vendor: {
path: './node_modules/__vue-vendor-bundle__', modules: [ 'babel-polyfill', 'axios', 'vue', 'vuex', 'vue-router', ]
},
mock: {
contentBase: './mock', port: 8092
}
}
6. 配置开发服务器
开发模式入口文件加入webpack热更新
entry: { main: [ 'webpack-dev-server/client?/', 'webpack/hot/only-dev-server' ] }, devtool: 'cheap-module-inline-source-map', devServer: { open: false, clientLogLevel: 'warning', publicPath: '/', contentBase: path.resolve(__dirname,'../src'), port: config.port, host: 'localhost', inline: true, historyApiFallback: { index: '/' }, hot: true, compress: true, proxy: config.proxy }
7. 预先构建动态链接库
module.exports = { entry: { vendor: config.vendor.modules }, output: { filename: '[name]_dll_[chunkhash:10].js', path: path.resolve(config.vendor.path), library: '[name]_dll_[chunkhash:10]' }, mode: process.env.NODE_ENV, performance: { hints: false }, plugins: [ new webpack.DllPlugin({ context: process.cwd(), path: path.join(config.vendor.path, '[name].json'), name: '[name]_dll_[chunkhash:10]' }), new webpack.HashedModuleIdsPlugin() ] };
8. 配置module
module: { rules: [ { test: /\.css$/, exclude: '/node_modules/', use: [ {loader: 'vue-style-loader'}, { loader: `css-loader`, options: { sourceMap: true, minimize: true } }, { loader: 'postcss-loader', options: { plugins: () => [ require('precss')(), require('postcss-cssnext')(), ] } } ] }, { test: /\.vue$/, loader: 'vue-loader', exclude: /node_modules/, options:{ loaders: { css: ['vue-style-loader','css-loader','postcss-loader'] } } }, { test: /\.(?:woff2?|eot|ttf|svg)$/, loader: 'file-loader', options: { name: 'icons/[name].[ext]' } }, { test: /\.(?:png|jpe?g|gif)$/, loaders: [ { loader: 'url-loader', options: { limit: 10000, name: '[name].[ext]' } } ] }, ]
}
9. 配置plugins
- 生产环境下清空打包目录
new CleanWebpackPlugin([config.outputBase], { root: path.resolve('./'), verbose: true }),
产出html
new HtmlWebpackPlugin({inject: true, title: 'test', template: '../src/index.html', filename: 'index.html', chunksSortMode: 'dependency', minify: { collapseWhitespace: true, removeComments: true, minifyJS: true }
}),
- 压缩css
new OptimizeCssAssetsPlugin(),
动态链接库做关联
new webpack.DllReferencePlugin({
context: process.cwd(), manifest: require(vendorManifestPath)
})
10. 启用optimization
- 开发环境下
optimization:{
namedModules: true,
}, - 生产环境下
optimization:{
hashedModuleIds:true,
},
11. 构建速度大大提升
- 第一次
- 再一次