```js
//詳細(xì)的webpack.config.js結(jié)構(gòu)分析：
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var TransferWebpackPlugin = require('transfer-webpack-plugin');
module.exports = {
? ? devtool: 'source-map',//由于打包后的代碼是合并以后的代碼，不利于排錯和定位站削，只需要在config中添加搁廓，這樣出錯以后就會采用source-map的形式直接顯示你出錯代碼的位置珠十。
? ? //noParse:[/jquery/],//表示跳過jquery,不對其進(jìn)行編譯,這樣可以提高打包的速度
? ? //頁面入口文件配置
? ? entry: {
? ? ? ? page1: "./src/index.js",
? ? ? ? //page2: ["./src/index.js", "./src/main.js"],支持?jǐn)?shù)組形式挖诸，將加載數(shù)組中的所有模塊缩赛，但以最后一個模塊作為輸出
? ? },
? ? //入口文件輸出配置
? ? output: {
? ? ? ? path: "dist/js/page",
? ? ? ? filename: "[name].bundle.js",// page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夾下。
? ? ? ? publicPath: "/dist/"? ? //網(wǎng)站運行時的訪問路徑乖订。
? ? },
? ? resolveLoader: {
? ? ? ? //指定默認(rèn)的loader路徑，否則依賴走到上游會找不到loader
? ? ? ? root: path.join(__dirname, 'node_modules'),
? ? ? ? alias: {//給自己寫的loader設(shè)置別名
? ? ? ? ? ? "seajs-loader": path.resolve( __dirname, "./web_modules/seajs-loader.js" )
? ? ? ? }
? ? },
? ? //新建一個開發(fā)服務(wù)器具练，并且當(dāng)代碼更新的時候自動刷新瀏覽器乍构。
? ? devServer: {
? ? ? ? historyApiFallback: true,
? ? ? ? noInfo: true,
? ? ? ? hot: true,
? ? ? ? inline: true,
? ? ? ? progress: true,
? ? ? ? port:9090 //端口你可以自定義
? ? },
? ? module: {
? ? ? ? // module.loaders 是最關(guān)鍵的一塊配置。它告知 webpack每一種文件都需要使用什么加載器來處理：
? ? ? ? loaders: [
? ? ? ? { test: /\.css$/, loader: 'style-loader!css-loader' },//.css 文件使用 style-loader 和 css-loader 來處理.
? ? ? ? //{ test: /\.css$/, loader: 'style!css' },其他寫法1扛点、"-loader"其實是可以省略不寫的哥遮，多個loader之間用“!”連接起來。
? ? ? ? //{ test: /\.css$/, loaders: ["style", "css"] }陵究，其他寫法2眠饮、用loaders數(shù)組形式;
? ? ? ? //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理铜邮。
? ? ? ? //在chrome中我們通過sourcemap可以直接調(diào)試less仪召、sass源文件文件
? ? ? ? { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
? ? ? ? { test: /\.less$/, loader: 'style!css!less?sourceMap'},//.less 文件使用 style-loader、css-loader 和 less-loader 來編譯處理
? ? ? ? //.js 文件使用babel-loader來編譯處理,設(shè)置exclude用來排除node_modules這個文件夾中的代碼
? ? ? ? { test: /\.js$/, loader: 'babel!jsx',exclude: /node_modules/ },
? ? ? ? { test: /\.jsx$/, loader: "jsx-loader?harmony" },//.jsx 文件使用 jsx-loader 來編譯處理
? ? ? ? { test: /\.json$/,loader: 'json'},
? ? ? ? //{ test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=8192'}, //圖片文件使用 url-loader 來處理松蒜，小于8kb的直接轉(zhuǎn)為base64
? ? ? ? {test: /\.(png|jpg|gif|svg)$/,loader: 'url',
? ? ? ? ? ? query: {limit: 10000,name: '[name].[ext]?[hash]'}//設(shè)置圖片名稱擴展名
? ? ? ? },
? ? ? ? { test: /\.jade$/, loader: "jade-loader" },//.jade 文件使用 jade-loader 來編譯處理
? ? ? ? { test: /\.ejs$/, loader: "ejs-loader" },//.ejs 文件使用 ejs-loader 來編譯處理
? ? ? ? { test: /\.handlebars$/, loader: "handlebars-loader" },//.handlebars 文件使用handlebars-loader來編譯處理handlebars模板文件
? ? ? ? { test: /\.dot$/, loader: "dot-loader" },//.dot 文件使用 dot-loader 來編譯處理dot模板文件
? ? ? ? { test: /\.vue$/, loader: "vue-loader" },//.vue 文件使用 vue-loader 來編譯處理
? ? ? ? { test: /\.coffee$/, loader: 'coffee-loader' },//.coffee 文件使用 coffee-loader 來編譯處理
? ? ? ? { test: /\.html$/,loader: 'vue-html'},
? ? ? ? { test: /\.woff$/,loader: "url?limit=10000&minetype=application/font-woff"},
? ? ? ? { test: /\.ttf$/,loader: "file"},
? ? ? ? { test: /\.eot$/,loader: "file"},
? ? ? ? { test: /\.svg$/,loader: "file"}
? ? ? ? ]
? ? },
? ? //分內(nèi)置插件和外置插件
? ? plugins: [
? ? ? ? //使用了一個 CommonsChunkPlugin 的插件扔茅，它用于提取多個入口文件的公共腳本部分，然后生成一個common.js來方便多頁面之間進(jìn)行復(fù)用秸苗。
? ? ? ? new webpack.optimize.CommonsChunkPlugin('common.js'),
? ? ? ? new webpack.optimize.UglifyJsPlugin({//壓縮文件
? ? ? ? ? compressor: {
? ? ? ? ? ? warnings: false,//supresses warnings, usually from module minification
? ? ? ? ? },
? ? ? ? ? except: ['$super', '$', 'exports', 'require']? ? //排除關(guān)鍵字(可選)
? ? ? ? }),
? ? ? ? new webpack.DefinePlugin({// definePlugin 接收字符串插入到代碼當(dāng)中, 所以你需要的話可以寫上 JS 的字符串
? ? ? ? ? ? __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
? ? ? ? ? ? __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
? ? ? ? }),
? ? ? ? new webpack.ProvidePlugin({//把一個全局變量插入到所有的代碼中,支持jQuery plugin的使用;使用ProvidePlugin加載使用頻率高的模塊
? ? ? ? ? ? //provide $, jQuery and window.jQuery to every script
? ? ? ? ? ? $: "jquery",
? ? ? ? ? ? jQuery: "jquery",
? ? ? ? ? ? "window.jQuery": "jquery"
? ? ? ? }),
? ? ? ? new webpack.NoErrorsPlugin(), //允許錯誤不打斷程序
? ? ? ? new TransferWebpackPlugin([ //把指定文件夾下的文件復(fù)制到指定的目錄
? ? ? ? ? {from: 'www'}
? ? ? ? ], path.resolve(__dirname,"src")),
? ? ? ? new HtmlwebpackPlugin({//用于生產(chǎn)符合要求的html文件;
? ? ? ? ? title: 'Hello World app',
? ? ? ? ? filename: 'assets/admin.html'
? ? ? ? })
? ? ],
? ? //其它解決方案配置
? ? resolve: {
? ? ? ? root: 'E:/github/flux-example/src', //絕對路徑, 查找module的話從這里開始查找(可選)
? ? ? ? extensions: ['', '.js', '.html', '.css', '.scss'], //自動擴展文件后綴名咖摹，意味著我們require模塊可以省略不寫后綴名
? ? ? ? alias: {? ? ? ? ? ? ? ? ? ? ? ? ? ? //模塊別名定義，方便后續(xù)直接引用別名难述，無須多寫長長的地址//后續(xù)直接 require('AppStore') 即可
? ? ? ? ? ? AppStore : 'js/stores/AppStores.js',
? ? ? ? ? ? ActionType : 'js/actions/ActionType.js',
? ? ? ? ? ? AppAction : 'js/actions/AppAction.js'
? ? ? ? },
? ? ? ? modulesDirectories: [//取相對路徑萤晴，所以比起 root ，所以會多很多路徑胁后。查找module(可選)
? ? ? ? ? ? 'node_modules',
? ? ? ? ? ? 'bower_components',
? ? ? ? ? ? 'lib',
? ? ? ? ? ? 'src'
? ? ? ? ]
? ? }
};
if (process.env.NODE_ENV === 'production') {
? module.exports.devtool = '#source-map'
? // http://vue-loader.vuejs.org/en/workflow/production.html
? module.exports.plugins = (module.exports.plugins || []).concat([
? ? new webpack.DefinePlugin({
? ? ? 'process.env': {
? ? ? ? NODE_ENV: '"production"'
? ? ? }
? ? }),
? ? new webpack.optimize.UglifyJsPlugin({
? ? ? compress: {
? ? ? ? warnings: false
? ? ? }
? ? }),
? ? //為組件分配ID店读，通過這個插件webpack可以分析和優(yōu)先考慮使用最多的模塊，并為它們分配最小的ID
? ? new webpack.optimize.OccurenceOrderPlugin()
? ])
}
————————————————
版權(quán)聲明：本文為CSDN博主「Afantor」的原創(chuàng)文章攀芯，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議屯断，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/solar_lan/article/details/82751165
```
