本节主要介绍webpack打包的时候CSS的处理方式
一、解决什么问题
1、CSS打包
2、CSS处理浏览器兼容
3、SASS支持
4、CSS分离成单独的文件
二、创建目录结构
创建项目目录结构：参照上图创建即可
三、需要安装的包
style-loader：将 JS 字符串生成为 style 节点；
css-loader： 将 CSS 转化成 CommonJS 模块; 这两个合到一个命令：npm install --save-dev style-loader css-loader
postcss-loader：处理浏览器兼容；命令：npm install --save-dev postcss-loader autoprefixer postcss
extract-text-webpack-plugin：将CSS分离到单独的文件；因webpack4.0以上不支持，所以需要安装next版本，命令：npm install --save-dev extract-text-webpack-plugin@next
html-webpack-plugin：根据模板生成文件，插入.js或.css文件；命令：npm install --save-dev html-webpack-plugin
四、webpack配置
1、首先在根目录下新建webpack.config.js文件；
代码如下：
1 const path=require('path'); 2 3 const extractTextPlugin = require("extract-text-webpack-plugin"); 4 const HtmlWebpackPlugin = require('html-webpack-plugin') 5 6 module.exports={ 7 //配置多个入口 8 entry:{ 9 'index':'./src/pages/index/index.js', 10 'home':'./src/pages/home/index.js', 11 }, 12 output:{ 13 //__dirname node.js的一个全局环境变量,用于指向当前执行脚本（dirname.js）所在的目录路径，而且是绝对路径 14 path: path.resolve(__dirname, 'dist'), 15 // 多入口打包后的文件名 16 publicPath: '/', 17 filename: 'assets/js/[name].[hash:8].js', 18 }, 19 module: { 20 rules: [ 21 { 22 test: /\.(css|scss|sass)$/, 23 use: extractTextPlugin.extract({ 24 fallback: "style-loader",// 将 JS 字符串生成为 style 节点，不打包成单独文件 25 use: [ 26 "css-loader", // 将 CSS 转化成 CommonJS 模块 27 "sass-loader", // 将 Sass 编译成 CSS 28 "postcss-loader"], //autoprefixer postcss处理浏览器兼容 29 // css中的基础路径 30 publicPath: "/" 31 }) 32 } 33 ] 34 }, 35 plugins: [ 36 new extractTextPlugin({ 37 // filename: 'css/[name].[hash:8].min.css', 38 filename: path.posix.join('assets', '/css/[name].[hash:8].min.css'), 39 }), 40 new HtmlWebpackPlugin({ 41 title:'多页面开发框架', 42 template: './src/pages/index/index.html', // 源模板文件 43 filename: './index/index.html', // 输出文件【注意：这里的根路径是module.exports.output.path】 44 showErrors: true, 45 inject: 'true', //所有JavaScript资源插入到body元素的底部 46 chunks: ["common",'index'] //配置写入哪些js和css 47 }), 48 new HtmlWebpackPlugin({ 49 title:'多页面开发框架', 50 template: './src/pages/home/index.html', // 源模板文件 51 filename: './home/index.html', // 输出文件【注意：这里的根路径是module.exports.output.path】 52 showErrors: true, 53 inject: 'true', //所有JavaScript资源插入到body元素的底部 54 chunks: ["common",'home'] //配置写入哪些js和css 55 }) 56 ], 57 }
2、增加postcss.config.js配置文件；
代码如下：
1 module.exports = { 2 plugins: [ 3 require('autoprefixer')({overrideBrowserslist: ['> 0.15% in CN']})// 自动添加css前缀 4 ] 5 }
配置文件注释写的很清楚，大家可以自己尝试一下哈~~！
五、打包完的目录结构
注意：当入口没有定义为多个时，CSS文件会始终合并成一个main文件
源码目录：https://github.com/James-14/webpack4_multi_page_demo
写的不对之处请大家批评指正~~~~!!!!!!
文章原创，转载请注明出处，谢谢！
