webpack4.0 + react

小咪咪 2021-10-30 05:40 359阅读 0赞

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

转载于:https://www.cnblogs.com/mufc/p/11276038.html