webpack -- 完整入门学习笔记（五）

一、分离css

这一步将css分离出来，需要用到分离插件，有两种：

1、extract-text-webpack-plugin

安装

npm install extract-text-webpack-plugin --save--dev

调用 调用这个需要重新修改css的loader的配置

{ test: /\.(sc|c)ss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader', { loader: 'postcss-loader', options: { sourceMap: true, } }, 'sass-loader' ] }) }

配置 因为这是个插件，所以需要在plugins里面配置

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') plugins: [ new ExtractTextWebpackPlugin('./assets/css/styles.[chunkhash:8].css') ]

这个实例里面的参数可以是文件名字，也可以是文件路径字符串

2、mini-css-extract-plugin

安装

npm install mini-css-extract-plugin --save-dev

调用 { test: /.(sc|c)ss$/, use: [ 'style-loader', { loader: MiniCssExtractPlugin.loader, options: {} }, { loader: 'css-loader', options: { importLoaders: 1, } }, { loader: 'postcss-loader', options: { sourceMap: true, plugins: [ require('autoprefixer')({browsers: 'last 2 version'}) ] } }, 'sass-loader' ], exclude: /node_modules/, include: path.resolve(__dirname, 'src') }配置

const MiniCssExtractPlugin=require('mini-css-extract-plugin'); new MiniCssExtractPlugin({ filename:'css/index.css' })

这里分离后，我们发现图片路径不对了，因为我们是本地打包运行，使用的是相对路径，所以我们需要修改一下image配置publicPath

publicPath: '../../assets/images'

转载于:https://www.cnblogs.com/zjh-study/p/10863459.html

相关资源：Solidity-以太坊区块链-Truffle-webpack-开发入门 (一) 环境配置