在开发阶段, 一般会有两套方案:

一套是开发期间的项目, 包罗测试文件, 测试数据, 开发工具, 测试工具等相关配置, 有利于项目的开发和测试, 但是这些文件仅用于开发, 颁布项目时候需要删除;

另一套是部署期间的项目, 剔除那些客户用不到的测试数据, 测试工具和文件, 对照纯净, 减少了项目颁布的体积, 有利于安置和部署 ;

为了满足我们的颁布计谋, 需要新建一个配置文件, 定名为 webpack.publish.config.js 将 webpack.config.js 的配置拷贝过去, 剔除一些开发配置即可 ;

devServer { hot: true, open: true, port: 8080 } 将 plugins 节点下的热更新插件删除 ; new webpack.HotModuleWordStrmentPlugin() 改削 url-loader , 将图片放入统一的 images 文件夹下 ; { test: /\.(png|jpeg)$/, use: 'url-loader?limit=1024&name=images/[name].[ext]' }

或者使用 img- 前缀加上 7位的hash名称 ;

{ test: /\.(png|jpeg)$/, use: 'url-loader?limit=1024&name=images/img-[hash:7].[ext]' } 每次打包自动生成 dist 目录 删除老的 dist 目录 npm install clean-webpack-plugin -D const cleanWebpackPlugin = require('clean-webpack-plugin'); plugins: [ // 需要删除的目录 new cleanWebpackPlugin(['dist']) ] 抽离第三方包

思路: bundle.js 只存放本身的代码 第三方包的代码全部抽离到一个此外的 js 中

const webpack = require('webpack'); const path = require('path'); module.exports = { entry: { app: path.join(__dirname, 'src/main.js'), // 要抽离的包 vendors: ['jquery'] }, output: { path: path.join(__dirname, 'dist'), // 如果前面加了目录就代表是打包到某个文件夹 '/js/vendors.js' filename: '/js/bundle.js' }, plugins: [ // 实例化结构函数 new webpack.optimize.CommonsChunkPlugin({ // 指定要抽离的入口名称, 此处和 entry 处对应 name: 'vendors', // 将来在颁布的时候, jquery 就放到了 vendors.js // 如果前面加了目录就代表是打包到某个文件夹 '/js/vendors.js' filename: 'vendors.js' }) ] }; 压缩 JS 代码 const webpack = require('webpack'); plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { // 配置压缩选项 warnings: false, // 移除警告 } }), new webpack.optimize.DedupPlugin({ // 界说出产环境, 进一步压缩代码 'process.env.NODE_ENV': '"production"' }) ] 压缩 HTML 代码 const htmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); plugins: [ template: path.join(__dirname, 'src/index.html'), filename: 'index.html', minify: { collapseWhitespace: true, // 合并多余空格 removeComments: true, // 移除注释 removeAttributeQuotes: true, // 移除属性上的双引号 } ] 抽离文件夹 npm install extract-text-webpack-plugin -D cont ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', // 打包到指定文件夹后可能会找不到配景图片 // 指定抽取的时候, 自动为我们的路径加上 ../ 前缀 publicPath: '../' }) } }, plugins: [ // 抽取 css 文件并且定名为 style.css // 如果前面加了目录就代表是打包到某个文件夹 '/css/style.css' new ExtractTextPlugin('style.css') ] }

参考链接:

压缩 CSS 文件 npm install optimize-css-assets-webpack-plugin -D var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); plugins: [ // 压缩 CSS 文件 new OptimizeCssAssetsPlugin() ]

webpack颁布计谋

，