最近工作忙，學習被暫停了，還是網上多看看資料，多學習學習一下，看到一些好的資料，自己想整理一下，這不，webpack2專案構建都還沒有弄懂，webpack3就已經發布了，說實話週末現在真不想看書和研究東西，拿著手機玩玩遊戲，看看電視真爽，但是IT行業沒有辦法，技術在不斷的更新，不學習安慰安慰一下自己，心裡過不去，萬一過1-2年被淘汰了，找份工作都不容易，因此還是多學習學習下，資料多整理一下，剛看完，阮一峰老師寫的 45歲以後的人生
說實話，感慨肯定有，不要說45歲以後，就說30來歲，現在週末都不想去折騰技術，所以IT行業會為以後擔憂的，好了先不說了；
專案的目錄結構如下：
### 目錄結構如下： demo # 工程名 | |--- dist # 打包後生成的目錄檔案 | |--- node_modules # 所有的依賴包 | |--- src # 專案的檔案包 | | |--- common | | | |---css # 公用頁面的css檔案 | | | |---js # 公用頁面的js檔案 | |--- | |--- .babelrc # 支援es6 | |--- .gitignore | |--- README.md | |--- index.html # 首頁入口檔案 | |--- package.json | |--- webpack.config.js # 配置檔案 | |--- webpack.production.config.js # 上線打包配置檔案
webpack 配置項如下程式碼：
// 匯入路徑包 const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { //開啟sourceMap便於除錯 devtool: 'eval-source-map', //入口檔案， entry: './src/main.js', output: { // 輸出檔案到當前目錄下的 build資料夾內 path: path.resolve(__dirname, 'build'), publicPath: '/assets/', //指定資原始檔引用的目錄 filename: 'bundle.js' // 指定打包為一個檔案 bundle.js // filename: '[name].js' // 可以打包為多個檔案 }, // 使用loader模組 module: { /* * 在webpack2.0版本已經將 module.loaders 改為 module.rules, 當然module.loaders也是支援的。 * 同時鏈式loader(用!連線)只適用於module.loader，同時-loader不可省略 */ rules: [ { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { // modules: true // 設定css模組化,詳情參考 https://github.com/css-modules/css-modules } }, { loader: 'postcss-loader', // 參考 https://github.com/postcss/postcss-loader options: { plugins: function() { return [ require('autoprefixer') ]; } } }] }, { test: /\.styl(us)?$/, use: [ 'style-loader', 'css-loader', { loader: "postcss-loader", options: { plugins: function() { return [ require('autoprefixer') ]; } } }, 'stylus-loader'] }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ //需要排除的目錄 } ] }, // 配置devServer各種引數 devServer: { // contentBase: "./", // 本地伺服器所載入的頁面所在的目錄 hot: true, // 配置HMR之後可以選擇開啟 historyApiFallback: true, // 不跳轉 inline: true // 實時重新整理 }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' // 模版檔案 }), new webpack.HotModuleReplacementPlugin() // 熱載入外掛 ] }
package.json 打包配置如下：
"scripts": { "start": "webpack-dev-server", "build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js" },
在專案中 進入專案的根目錄後，執行 npm run start 即可執行專案；
在webpack2.0中使用 module.rules 來 代替之前的 module.loaders， 並且使用了 postcss-loader 外掛，該外掛的作用是：
用來對 .css檔案進行處理，並新增在 style-loader 和 css-loader 之後，通過一個額外的 postcss方法來返回所需要使用的 PostCss外掛，比如，程式碼返回
require('autoprefixer') 的作用是 載入 Autoprefixer外掛。那麼Autoprefixer外掛的作用是為 css中的屬性新增瀏覽器特定的字首，因為一些css新屬性，
各個瀏覽器下並不支援，因此使用該外掛就可以做這些事情，比如在頁面的程式碼如下：
h1 {
display: flex;
}
那麼實際在頁面上，通過Autoprefixer外掛會自動渲染為：
h1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
該外掛就是解決瀏覽器字首的問題，當然還有很多外掛都可以往這個裡面加。
在webpack的配置檔案中可以對devServer 配置如下：
devServer: {
// contentBase: "./", // 本地伺服器所載入的頁面所在的目錄
hot: true, // 配置HMR之後可以選擇開啟
historyApiFallback: true, // 不跳轉
inline: true // 實時重新整理
}
這時候我們就可以監聽入口檔案的改變，比如目前專案中的入口檔案是 main.js，那麼main.js及所有通過import進來的css和js檔案進來的，只要有修改，都會
實時重新整理，但是html檔案修改不能實時重新整理了，修改後需要我們手動重新整理了。如上配置 devServer的 "inline"選項會為頁面新增 "熱載入"功能，"hot"功能
會開啟 "熱替換"，即首先重新載入元件改變的部分(不是重新載入整個頁面)，如果兩個引數都有的話，當資源改變時，webpack-dev-server將先嚐試 熱替換，
如果失敗則會重新載入整個頁面。 但是要實現熱載入的話，還需要在程式碼中加入如下程式碼：
plugins: [
new webpack.HotModuleReplacementPlugin() // 熱載入外掛
]
配置中 devtool: 'eval-source-map', 配置會生成map檔案，便於除錯程式碼。
webpack2.0增加了對ES6模組的支援，不需要任何配置，webpack只針對 import匯入和export 匯出 的模組才會被編譯為ES5，如果想所有的打包檔案被編譯成ES5的話，需要使用babel編譯器轉換，因此需要按照babel，然後在專案的根目錄檔案下 新增 .babelrc檔案即可；
{
"presets": [
["es2015", {"modules": false}]
]
}
並且在webpack中需要新增loader，如下：
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/ //需要排除的目錄
}