最近工作忙，學習被暫停了，還是網上多看看資料，多學習學習一下，看到一些好的資料，自己想整理一下，這不，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"},
webpack分包打包，在項目中 進入項目的根目錄后，運行 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搭建vue項目。并且在webpack中需要添加loader，如下：
{test: /\.js$/,loader: 'babel-loader', exclude: /node_modules/ //需要排除的目錄
} git上代碼連接
?
