webpack的发布策略
- 在实际开发中,一般会有两套项目方案:
- 一套是开发期间的项目,包含了测试文件、测试数据、开发工具、测试工具等相关配置,有利于项目的开发和测试,但是这些文件仅用于开发,发布项目时候需要剔除;
- 另一套是部署期间的项目,剔除了那些客户用不到的测试数据测试工具和文件,比较纯净,减少了项目发布后的体积,有利于安装和部署!
- 为了满足我们的发布策略,需要新建一个配置文件,命名为
webpack.publish.config.js
,将webpack.config.js
的配置拷贝过去,剔除一些开发配置项即可:- 将
devServer
节点删掉:devServer: { hot: true, open: true, port: 4321 }
- 将
plugins
节点下的热更新插件删掉:new webpack.HotModuleReplacementPlugin()
- 将
- 修改
url-loader
,将图片放入统一的images文件夹之下:{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images/[name].[ext]' }
或者使用img-
前缀加上7位的hash名称
:{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images/img-[hash:7].[ext]' }
- 在
package.json
中的script节点下新增dev
命令,通过--config
指定webpack启动时要读取的配置文件:"pub": "webpack --config webpack.publish.config.js"
每次重新构建时候删除dist目录
- 运行
cnpm i clean-webpack-plugin --save-dev
- 在头部引入这个插件:
var cleanWebpackPlugin = require('clean-webpack-plugin');
- 在
plugins
节点下使用这个插件:new cleanWebpackPlugin(['dist'])
分离第三方包改造webpack.publish.config.js
- 改造entry节点如下:
entry: { app: path.resolve(__dirname, 'src/js/main.js'), // 自己代码的入口 vendors: ['jquery'] // 要分离的第三方包的入口 }
- 在plugins节点下新增插件:
new webpack.optimize.CommonsChunkPlugin({ // 抽离第三方包的插件 name:'vendors', // 指定抽离第三方包的入口名称 filename:'vendors.js' // 抽离出的公共模块的名称 })
html-webpack-plugin
在生成index.html
文件的时候,会自动将抽离的第三方包引入进去!
优化压缩JS
在plugins数组中添加:new webpack.optimize.UglifyJsPlugin({ // 优化压缩JS compress:{ warnings:false // 移除警告 } }), new webpack.DefinePlugin({ // 设置为产品上线环境,进一步压缩JS代码 'process.env.NODE_ENV': '"production"' })
优化压缩HTML文件
在plugins
节点下的htmlWebpackPlugin
插件中,添加minify
子节点:minify:{// 压缩HTML代码 collapseWhitespace:true, // 合并空白字符 removeComments:true, // 移除注释 removeAttributeQuotes:true // 移除属性上的引号 }
抽取CSS文件
- 运行
npm install --save-dev extract-text-webpack-plugin
安装抽取CSS文件的插件。 - 在配置文件中导入插件:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
- 修改CSS和Sass的loader如下:
{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader"], publicPath: '../' // 设置图片路径 }) }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ['css-loader', 'sass-loader'], publicPath: '../' // 设置图片路径 }) }
- 在plugins节点下新增插件:
new ExtractTextPlugin("css/styles.css"), // 抽取CSS文件的插件
压缩抽取出来的CSS文件
- 运行
cnpm i optimize-css-assets-webpack-plugin --save-dev
安装插件到开发依赖。 - 在配置文件头部导入插件:
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
- 在plugins节点下新增插件:
new OptimizeCssAssetsPlugin() // 压缩CSS文件的插件
const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') // 导入每次删除文件夹的插件 const cleanWebpackPlugin = require('clean-webpack-plugin') const webpack = require('webpack') // 导入抽取CSS的插件 const ExtractTextPlugin = require("extract-text-webpack-plugin") // 导入压缩CSS的插件 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') module.exports = { entry: { // 配置入口节点 app: path.join(__dirname, './src/main.js'), vendors1: ['jquery'] // 把要抽离的第三方包的名称,放到这个数组中 }, output: { path: path.join(__dirname, './dist'), filename: 'js/bundle.js' }, plugins: [ // 插件 new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: 'index.html', minify: { collapseWhitespace: true, // 合并多余的空格 removeComments: true, // 移除注释 removeAttributeQuotes: true // 移除 属性上的双引号 } }), new cleanWebpackPlugin(['dist']), new webpack.optimize.CommonsChunkPlugin({ name: 'vendors1', // 指定要抽离的入口名称 filename: 'js/vendors.js' // 将来再发布的时候,除了会有一个 bundle.js ,还会多一个 vendors.js 的文件,里面存放了所有的第三方包 }), new webpack.optimize.UglifyJsPlugin({ compress: { // 配置压缩选项 warnings: false // 移除警告 } }), new webpack.optimize.DedupePlugin({ // 设置为产品上线环境,进一步压缩JS代码 'process.env.NODE_ENV': '"production"' }), new ExtractTextPlugin("css/styles.css"), // 抽取CSS文件 new OptimizeCssAssetsPlugin()// 压缩CSS的插件 ], module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader", publicPath: '../' // 指定抽取的时候,自动为我们的路径加上 ../ 前缀 }) }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'], publicPath: '../' // 指定抽取的时候,自动为我们的路径加上 ../ 前缀 }) }, { test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=5000&name=images/[hash:8]-[name].[ext]' }, { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } ] } }