const path = require('path')const webpack = require('webpack')const htmlWebpackPlugin = require('html-webpack-plugin')// 每次打包之前，自動刪除文件夾const cleanWebpackPlugin = require('clean-webpack-plugin')// 分離 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/js/main.js'),// 第三方包入口vendor: ['vue', 'vue-router', 'vue-resource', 'vuex', 'moment', 'mint-ui', 'vue-preview']},// 出口output: {path: path.join(__dirname, './dist'),// 設置公共路徑publicPath: '/',// 此處的name由 entry 中的屬性名決定// chunk 表示一個代碼塊（webpack模塊化分析代碼后的結構）filename: 'js/[name].[chunkhash].js',// ------添加 chunkFilename, 指定輸出js文件的名稱------chunkFilename: 'js/[name].[chunkhash].js',},// 配置loader，處理不同的靜態資源module: {rules: [{ test: //.js$/, use: 'babel-loader', exclude: /node_modules/ },{test: //.css$/,// 抽離和壓縮cssuse: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})},{test: //.(sass|scss)$/,// 抽離和壓縮 scssuse: ExtractTextPlugin.extract({fallback: "style-loader",use: ['css-loader', 'sass-loader']})},{test: //.(png|jpg|jpeg|gif|bmp|webp)$/, use: {loader: 'url-loader',options: {limit: 6518,// name: 'images/imgs-[hash:7].[ext]'// [name] 使用圖片的名稱作為最終生成的文件名稱// [ext] 使用圖片的默認后綴// name: '[name].[ext]'// images/ 表示圖片生成后存放的路徑name: 'images/[hash:10].[ext]'}}},{// 參考上面圖片的配置，進行配置即可test: //.(ttf|woff|woff2|svg|eot)$/,use: {loader: 'url-loader',options: {limit: 2048,name: 'fonts/[hash:10].[ext]'}}},{ test: //.vue$/, use: 'vue-loader' },]},// source-map 定位錯誤的// devtool: 'cheap-module-source-map',// 配置 htmlWebpackPluginplugins: [new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),filename: 'index.html',// 壓縮HTMLminify: {// 移除空白collapseWhitespace: true,// 移除注釋removeComments: true,// 移除屬性中的雙引號removeAttributeQuotes: true}}),// 自動刪除dist目錄// 參數：表示要刪除文件的路徑，可以是多個new cleanWebpackPlugin(['./dist']),// 分離第三方包（公共包文件）new webpack.optimize.CommonsChunkPlugin({// 第三方包入口名稱，對應 entry 中的 vendor 屬性// 將 entry 中指定的 ['vue', 'vue-router', 'vue-resource'] 打包到名為 vendor 的js文件中name: 'vendor',}),// 壓縮js代碼new webpack.optimize.UglifyJsPlugin({sourceMap: true,// 壓縮compress: {// 移除警告warnings: false}}),// 指定環境，設置為生產環境// 開發期間我們使用vue的為壓縮版本，項目上下了，只需要將環境修改為// 生產環境，那么，vue就會自動變為 壓縮版本new webpack.DefinePlugin({'process.env': {'NODE_ENV': JSON.stringify('production')}}),// 通過插件抽離 css (參數)// 參數：表示將抽離的css文件生成到哪個目錄中new ExtractTextPlugin("css/style.css"),// 壓縮抽離之后的cssnew OptimizeCssAssetsPlugin(),// 啟用 scope hoistingnew webpack.optimize.ModuleConcatenationPlugin()]}