webpack4.0 + react

　　webpack4.0 中刪除了 module.loaders、NoErrorsPlugin、CommonsChunkPlugin、OccurenceOrderPlugin，將再也不支持這也插件等；

 

　　moudule.loader

　　　　在 webpack3.0 中進行文件的解析的時候咱們的配置通常是：

module: {
　　rules: [
　　　　{ 
　　　　　　test: /\.js|.jsx$/, loader: "babel-loader", query:{ presets:["es2015","react"] }
　　　　},
　　　　{
　　　　　　test: /\.css$/, loader: 'style-loader!css-loader'
　　　　},
　　　　{
　　　　　　test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'
　　　　},
　　　　{
　　　　　　test: [/\gif$/,/\.jpe?g$/,/\.png$/], loader: 'url-loader', options: { limit: 10000, } } ]
　　　　},

 　　　　在 webpack4.0 中將再也不使用 loader ，而是使用 use，可是好像仍是能夠繼續使用 loader 的：

rules: [
    { test: /\.js|.jsx$/, use: 'babel-loader' },
    { test: /\.css$/, use: [MinicssExtractPlugin.loader,'css-loader'], },
    { test: /\.scss$/, use: [MinicssExtractPlugin.loader,'css-loader','sass-loader'] }
]

 　　　　在 webpack3.0 的時候能夠使用 extract-text-webpack-plugin 進行 css 文件的抽離，可是在 webpack4.0 中，是不支持它的，能夠使用 mini-css-extract-plugin 來代替，此處無論用 3.0 仍是 4.0 的抽離，實際上是將 css 從 js 中進行抽離，並非將單個的組件的中的文件給抽離出來了，在 vue-cli 中使用這個組件也並無生成多個的 css 文件；對於抽離出來的 css 文件的名字，已經放在哪一個文件夾的下邊，咱們能夠經過以下代碼，在 plugins: [ ] 中進行設定

// webpack3.0 中 extract-text-webpack-plugin
new ExtractTextPlugin({
      filename: 'styleCss/[name]_[contenthash:8].css'
}),
// webpack4.0 中 min-css-extract-plugin
new MinicssExtractPlugin({
	filename: 'static/css/[name].css',
}),

    

 

 

　　CommonsChunkPlugin

　　　　　webpack4.0 移除了 commonsChunkPlugin 改用了 optimization 屬性，這樣能夠更加靈活的進行配置，具體配置參數查看 https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroupscachegrouptest

　　　　　相應的配置以下，其實打包以後的文件在哪一個文件夾下邊，主要仍是要看 出口文件的，而使用 optimization 咱們在入口文件處進行相應的配置，能夠是打包以後的 js 文件，單獨的某些塊或者文件打包成一個文件；

entry: {
      main: './src/main.js',
      vendor: ['react', 'react-dom']
 },
output: {
    filename: 'static/js/[chunkhash:8].[name].js',
    publicPath: './',
 },

 

 

　　DefinePlugin

　　　　有些文件中指出，webpack4.0 刪除了 DefinePlugin ，其實並無，只不過有些改變而已，在 webpack3.0 中咱們習慣的去進行配置 process.env 的一些屬性，而後進行獲取，可是在 webpack4.0 中咱們將不能再去設置 process.env 而後在頁面中進行使用了，想要設置 node 的公共的環境變量仍是能夠經過  new webapck.definePlugin() 來進行設置的；在 webpack4.0 中默認的會將 process.env.NODE_ENV 設置成 product 或者 devlopment 或者 none；咱們在 webpack 配置的時候也是能夠拿到的，可是咱們是拿不到 process.env 以及 process.argv 的，這些返回的都是 {} ，一個空的對象；可是咱們還能夠在 package.json 中經過配置 --mode 或者 --env.dev 進行設置，而後在webpack 中進行  modult.export = (env,argv) => { return {}} 中來獲取咱們在 package.josn 中配置的數據，只不過這裏配置的參數在組件中是獲取不到的；