为什么要用 extract-text-webpack-plugin这个插件,这个插件可以为我们实现样式模块化,并且在打包的时候可以生成一个总得css文件。我是在react的项目中用到的。接下来怎么用呐?
1,首先我们npm安装 npm install extract-text-webpack-plugin --save-dev.
2,在webpack.config.js中进行配置 首先我们要引入
const ExtractTextWebpack = require("extract-text-webpack-plugin"); 关于里边参数的详细说明可以看git官网https://github.com/webpack-contrib/extract-text-webpack-plugin
module: { loaders: [ { test: /\.js(x)?$/, loader: "babel-loader", exclude: /mode_modules/ }, { test: /\.css$/, use: ExtractTextWebpack.extract({ fallback: ‘style-loader‘, use: [‘css-loader‘], publicPath: path.resolve(__dirname, ‘dist‘) }) } ] }
3:我们想在编译后看到这个文件夹,这样就会在我们的dist目录下生成一个 style.css了,如果你用的是less。sass,stylus这个时候你只需要下载相应的loader然后在里边做相应的配置就好了
plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, ‘./src/index.html‘) }), new ExtractTextWebpack("style.css") ]
时间: 2024-10-28 11:43:17