標題: webpack配置 [打印本頁]
作者: ismyshell    時間: 2018-3-6 15:53
標題: webpack配置
webpack

1.webpack 支持es6 import export ，開箱機用，但是要使用es6的其他的特性，需要在babel中進行配置
2 style-loader, css-loader 打包的css文件會在<style></style>中生成
3. plugins :
        html-webpack-plugin
                 自動生成新的index.html文件
        clean-webpack-plugin
                清除dist目錄內(nèi)容
        WebpackManifestPlugin webpack
                能夠?qū)Α改愕哪K映射到輸出 bundle 的過程」保持追蹤
4.        npm install --save-dev webpack-dev-server
                webpack-dev-server 為你提供了一個簡單的 web 服務(wù)器，
                并且能夠?qū)崟r重新加載(live reloading)。
                如果現(xiàn)在修改和保存任意源文件，web 服務(wù)器就會自動重新加載編譯后的代碼
5.使用 webpack-dev-middleware
        webpack-dev-middleware 是一個中間件容器(wrapper)，它將通過 webpack 處理后的文件發(fā)布到一個服務(wù)器(server)。
6.模塊熱替換 它允許在運行時更新各種模塊，而無需進行完全刷新.
        const webpack = require(‘webpack');
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
7. npm i --save-dev uglifyjs-webpack-plugin
        能夠刪除未引用代碼(dead code)的壓縮工具(minifier) - UglifyJSPlugin
        source-map
```
        new UglifyJSPlugin({
                        sourceMap: true
              }),
```
8. npm install --save-dev webpack-merge
        merge(base, dev)
9        指定環(huán)境
```
        new webpack.DefinePlugin({
                      'process.env.NODE_ENV': JSON.stringify('production')
            })       
```
10 CommonsChunkPlugin 來移除chunks中重復(fù)的模塊。

11       
```.resolve: {
                    extensions: ['.js', '.vue', '.json'],
                    alias: {
                              'vue$': 'vue/dist/vue.esm.js',
                      '@': resolve('src'),
                    }
          },
```

12.       
```
{
                        test: /\.(png|svg|jpg|gif)$/,
                        loader: 'file-loader',
                        options:{
                                  limit:10000,
                                 name:'img/[name].[hash].[ext]'
                        }
              }
output: {
    filename: 'js/[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
```
13 npm install --save-dev extract-text-webpack-plugin
```
        {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        }),
        exclude:"/node_modules"
      },

new ExtractTextPlugin({
      filename:"css/[name].[contenthash].css",
      allChunks:true
    }),
```

幾個入口文件 幾個css
css 壓縮  use: ["css-loader?importLoaders=1&&minimize",
14 psotcss
        nam  i  psotcss-loader autoprefixer -D

        webpack
```
  {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader?importLoaders=1","postcss-loader"]
        }),
        exclude:"/node_modules"
      },
```

使用@import引入時無法加上前綴 使用?importLoaders=1來hack

posts.config.js
```
module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: ['last 5 versions']
    })
  ]
}
```
15 npm install --save-dev babel-core babel-loader  babel-preset-es2015
```
        {
                test: /\.js$/,
                use:['babel-loader'],
                exclude: "/node_modules"
              }

        .baselrc
        {
          "presets": [
            "es2015"
          ]
        }
```





歡迎光臨 (http://www.torrancerestoration.com/bbs/) Powered by Discuz! X3.1