一直以來使用webpack都是用的別人的配置，這幾天自己學習了一下。

項目地址：https://github.com/donghaohao...

新建整個工程

1. npm init

2. 安裝依賴，這里我們開發vue項目，npm install vue --save，然后是開發時的依賴npm install --save-dev

3. 這里有個重點是寫package.json里面的scripts，因為我們要分開發環境和生產環境。開發環境使用webpack-dev-server熱替換，生產環境需要壓縮，加hash等。使用npm run dev 或 npm run build 就可以運行下面的腳本。

    "dev": "webpack-dev-server --inline --hot --compress --history-api-fallback --config webpack.dev.config.js","build": "webpack --progress --hide-modules --config webpack.prod.config.js"

配置

這里分為三個：webpack.base.config.js webpack.dev.config.js webpack.prod.config.js

1. entry設置入口文件，可以設置多個，就會打包成多個，vendors是我們如果引用了vue，jQuery等，就不會把這些和代碼打包到一起，會另外生成vendor.js。

   entry: {main: './src/index.js',vendors: ['vue']
   },

2. 輸出目錄，這里path是最后打包完的輸出目錄，publicPath是server上的目錄，這個自行設置好路徑。我們在開發模式的時候并不會輸出到目錄的。

3. webpack主要就是各種loader，這個可以參考我的github上的，需要解釋的有兩點，一是使用vue-loader時，因為需要使用postcss，所以下面需要這樣寫：

     vue: {autoprefixer: false,postcss: [nested(),cssnext({ browsers: ['last 2 versions', 'Android >= 2.1', 'iOS >= 7.0'] }),flexFallback(),],},

   二個就是使用url-loader時，它會自動在圖片后面加hash，強迫癥患者表示不行，我們在開發模式下不加，生產模式下加。

   // 開發模式
   config.module.loaders.push({test: /\.(gif|jpg|png|jpeg|svg)\??.*$/, loader: 'url-loader?name=[name].[ext]&limit=8192'
   });

   // 生產模式
   config.module.loaders.push({test: /\.(gif|jpg|png|jpeg|svg)\??.*$/, loader: 'url-loader?limit=8192'
   });

4. preLoaders 就是提前處理，這里我們使用了eslint，需要檢查書寫規范，然后添加 .eslintrc 文件.

5. resolve，extensions就是你require的時候可以省略擴展名，alias就是別名，在require的時候直接使用別名，避免寫的太長。

   resolve: {// 擴展，require時省略擴展名extensions: ['', '.js', '.vue'],// 別名alias: {filter: path.join(__dirname, './src/filters'),components: path.join(__dirname, './src/components')}}

6. 插件

   • ExtractTextPlugin 提取CSS。

   • HtmlWebpackPlugin 生產html，這個可以自己生成也可以指定模板，會將打包的js和css插入到html中，這個有好多其他參數，可自行搜索。

   • webpack.optimize.CommonsChunkPlugin 這個為了抽取前面vendor里的第三方庫，打包成另外的文件。

   • webpack.optimize.UglifyJsPlugin 壓縮代碼。（生產模式）

   • CleanWebpackPlugin 這個是我最新發現的一個，主要是在打包到dist之前先刪除以前的dist，因為加hash厚并不會覆蓋。（生產模式）

7. 這里使用了ES6，所以要配置一下.babelrc。

增加項目文件

這里我只是增加了一些測試的項目文件，開發和生產都正常，如有需要可以自行添加其他目錄。