webpack開發Vue配置

一直以來使用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。

增長項目文件

這裏我只是增長了一些測試的項目文件，開發和生產都正常，若有須要能夠自行添加其餘目錄。