配置上線版（生產環境）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'}]} }

3.終端鍵入：webpack 打開發環境的包。

注意： 以上用到的模塊或插件，在使用之前確保安裝。

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的webpack上线版（生产环境中推荐使用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。