webpack可以根據你的前端項目依賴關系和加載規則來把項目打包壓縮的工具，了解webpack之前需要對nodeJS有一定的了解，尤其是模塊化的原理，因為webpack是基于node開發的一個npm包，正是node的快速發展，commonJS規范的制定，根據包管理規范和模塊化的應用才讓webpack能在項目中根據依賴關系解析并打包
一. 首先要了解package.json文件的含義
每個項目的根目錄下面，一般都有一個package.json文件，定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。npm install命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境。可以說package.json文件就是項目包的名片。
較重要的是scripts字段
一般有兩種開發環境項目的配置，一種是直接webpack命令
"dev": "cross-env NODE_ENV=development webpack-dev-server --host 192.168.20.21 --open --inline --hot",
"build": "webpack --config config.js --progress --hide-modules"
}
另一種是通過node來自己創建服務,利用webpack-dev-middleware插件
"scripts": {
"start": "node server.js",
"build:webpack": "cross-env NODE_ENV=production webpack --display-chunks -c --config webpack.config.prod.js",
"build": "npm run build:webpack",
"precommit-msg": "echo 'Pre-commit checks...' && exit 0",
"lint": "babel-node lint.js",
"test": "echo \"Error: no test specified\"&& exit 1"
}
http://javascript.ruanyifeng.com/nodejs/packagejson.html
一般項目會分為開發環境和生產環境，這兩種環境需求不一樣所以配置也有差別，所以可能需要有兩份配置文件，或者根據全局變量控制做不同配置，不過我個人還是傾向分開。
二. webpack配置文件
- entry：分為三種，字符串（一個入口文件）、數組（一個入口多個文件且無關聯）、對象（多入口多頁面）
entry : {index: './src/main.js', index2: './src/main2.js'},//入口文件 index， index2
- output:
output : {//輸出文件
filename : 'js/[name].js',//輸出文件名
// publicPath: '',//添加靜態資源, 否則會出現路徑錯誤
chunkFilename: 'js/[name].js',//CommonsChunkPlugin提取的公共文件
path : __dirname//輸出文件路徑
},
- module: 設置對應文件對應解析loader
module : {
rules: [
{test: /.js$/, use: ['babel-loader']}, // js轉es5
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// cssModules: {
// localIdentName: '[path][name]---[local]---[hash:base64:5]',
// camelCase: true
// }
}
},
{ test: /\.(eot|woff|ttf)$/, loader: 'file-loader' },
//{test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style標簽里*/
{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css變成文件通過link標簽引入*/
//{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'img/[name].[hash:8][ext]'
}
},
{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器可以識別的css語言*/
]
},
- resolve: 降低路徑和擴展名的復雜度
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js',//引用vue時, 創建 import 或 require 的別名，來確保模塊引入變得更簡單, $表示 精確匹配
extensions: [".js", ".json"] //自動解析確定的擴展，當前為默認值
}
},
-
devtool: 我們在使用 webpack 打包我們的工程模塊時，經常會需要 devtool 開啟 sourceMap 讓我們可以調試代 碼，但是 webpack 文檔中關于 devtool 給出了7種模式 https://juejin.im/post/58293502a0bb9f005767ba2f
``` devtool: '#eval-source-map', ``` -
plugins: 插件（Plugins）是用來拓展webpack功能的，它們會在整個構建過程中生效，執行相關的任務,webpack有很多內置插件，同時也有很多第三方插件，可以讓我們完成更加豐富的功能。
plugins: [ CommonsChunkPlugin, //提取公共文件 new ExtractTextPlugin('css/[name].css'), new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', chunks: ['common', 'index'] }), new HtmlWebpackPlugin({ filename: 'index2.html', template: 'index2.html', chunks: ['common', 'index2'] }) ]//插件集合
