webpack上线版（生产环境中推荐使用）

配置上线版（生产环境）webpack：

实际中将开发环境中和生产环境中打包配置是分开的，两者本质没太大区别，只是生产环境中的webpack打包配置要更加优化合理，下面将具体介绍一下生产环境中webpack配置文件，其步骤：

1.在项目文件夹中新建一个名为： webpack.publish.config.js 的文件。

2.在package.json文件script中新增配置： “pub”:“webpack --config webpack.publish.config.js”

3.将 webpack.config.js 文件中的代码复制粘贴到 webpack.publish.config.js 文件中进行修改。

4.下面是 webpack.publish.config.js 文件中修改过后的代码示例：

const path = require('path');//引入路径模块const htmlWebpackPlugin = require('html-webpack-plugin');//用于打包时生成html文件的插件const cleanWebpackPlugin = require('clean-webpack-plugin');//用于每次打包时删除dist中旧的文件的插件const webpack = require('webpack');//引入webpack自己，用于配置webpack本身const ExtractTextPlugin = require("extract-text-webpack-plugin");//引入抽取CSS的插件const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//引入压缩CSS的插件module.exports = {entry: { // 配置入口文件：app: path.join(__dirname, './src/main.js'),//将项目根目录中src下的main.js作为入口文件vendors: ['jquery'] // 配置第三方包无需打包到一起，把要抽离的第三方包名加到数组即可},output: {//配置出口文件：path: path.join(__dirname, './dist'),//将打包后的文件输出到：项目根目录中dist文件夹中filename: 'js/bundle.js'//将打包后的js文件命名为bundle.js并将其存放到dist下js文件夹中},plugins: [ // 配置插件：new htmlWebpackPlugin({//打包时在dist中生成html文件的插件template: path.join(__dirname, './src/index.html'),//配置打包时需要的html文件供打包生成html文件filename: 'index.html',//html文件名minify: {//压缩配置：collapseWhitespace: true, // 合并多余的空格removeComments: true, // 移除注释removeAttributeQuotes: true // 移除属性上的双引号}}),new cleanWebpackPlugin(['dist']),//每次打包时删除旧的dist文件new webpack.optimize.CommonsChunkPlugin({//抽离第三方包的插件name: 'vendors', // 指定要抽离的入口名称filename: 'js/vendors.js' //将第三方包单独打包到vendors.js文件中}),new webpack.optimize.UglifyJsPlugin({//压缩插件compress: { // 配置压缩选项warnings: false // 移除警告}}),new webpack.optimize.DedupePlugin({ //配置环境插件'process.env.NODE_ENV': '"production"'// 设置为上线环境，进一步压缩JS代码}),new ExtractTextPlugin("css/styles.css"), // 抽取CSS文件new OptimizeCssAssetsPlugin()// 压缩CSS代码的插件],module: {rules: [{//处理css文件：test: /\.css$/, use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader",publicPath: '../' //抽取的时候，自动为路径加上 ../ 前缀})},{//处理scss文件：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]'//当文件大于5000时，将文件输出到dist下images文件夹中，命名为：取hash值前8位+原文件名+后缀},{//处理js文件:test: /\.js$/, use: 'babel-loader',exclude: /node_modules/ //排除node_modules文件夹中的文件},{//处理vue文件：text: /\.vue$/,use: 'vue-loader'},{//处理txt文件：test: /\.txt$/,use: 'raw-loader'}//注意：更多处理相关文件的配置自行配置，需要根据实际进行处理，避免无效loader]}
}

5.终端输入：npm run pub 打生产环境的包。

开发环境webpack配置：
需要注意：开发环境还是建议使用开发环境的打包配置进行打包，因为这样开一提高开发效率，开发环境打包配置之前已经介绍过，这里再做简单强调一下，其主要步骤：
1.确保在package.json文件script中有配置：“dev”: “webpack-dev-server --open --port 3000 --hot”

2.确保项目文件夹根目录下有: package.config.js 文件，其代码示例：

const path = require('path')const htmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: path.join(__dirname, './src/main.js'),output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'},plugins: [new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),filename: 'index.html'})],module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader']},{test: /\.(png|gif|bmp|jpg)$/,use: 'url-loader?limit=5000'},{test: /\.js$/,use: 'babel-loader',exclude: /node_modules/},{text: /\.vue$/,use: 'vue-loader'},{test: /\.txt$/,use: 'raw-loader'}]}
}