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 中配置的数据，只不过这里配置的参数在组件中是获取不到的；