webpack4.0 + react

  • Z时代
  • 2024-01-10
  • 分类：综合

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

以上是 webpack4.0 + react 的全部内容， 来源链接： utcz.com/z/383285.html

回到顶部