基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离

本节主要介绍webpack打包的时候CSS的处理方式

一、解决什么问题

     1、CSS打包

     2、CSS处理浏览器兼容

     3、SASS支持

     4、CSS分离成单独的文件

二、创建目录结构

  基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离

创建项目目录结构:参照上图创建即可

三、需要安装的包

  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文件;

   代码如下:

 const path=require('path');

 const extractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports={
//配置多个入口
entry:{
'index':'./src/pages/index/index.js',
'home':'./src/pages/home/index.js',
},
output:{
//__dirname node.js的一个全局环境变量,用于指向当前执行脚本(dirname.js)所在的目录路径,而且是绝对路径
path: path.resolve(__dirname, 'dist'),
// 多入口打包后的文件名
publicPath: '/',
filename: 'assets/js/[name].[hash:8].js',
},
module: {
rules: [
{
test: /\.(css|scss|sass)$/,
use: extractTextPlugin.extract({
fallback: "style-loader",// 将 JS 字符串生成为 style 节点,不打包成单独文件
use: [
"css-loader", // 将 CSS 转化成 CommonJS 模块
"sass-loader", // 将 Sass 编译成 CSS
"postcss-loader"], //autoprefixer postcss处理浏览器兼容
// css中的基础路径
publicPath: "/"
})
}
]
},
plugins: [
new extractTextPlugin({
// filename: 'css/[name].[hash:8].min.css',
filename: path.posix.join('assets', '/css/[name].[hash:8].min.css'),
}),
new HtmlWebpackPlugin({
title:'多页面开发框架',
template: './src/pages/index/index.html', // 源模板文件
filename: './index/index.html', // 输出文件【注意:这里的根路径是module.exports.output.path】
showErrors: true,
inject: 'true', //所有JavaScript资源插入到body元素的底部
chunks: ["common",'index'] //配置写入哪些js和css
}),
new HtmlWebpackPlugin({
title:'多页面开发框架',
template: './src/pages/home/index.html', // 源模板文件
filename: './home/index.html', // 输出文件【注意:这里的根路径是module.exports.output.path】
showErrors: true,
inject: 'true', //所有JavaScript资源插入到body元素的底部
chunks: ["common",'home'] //配置写入哪些js和css
})
],
}

  2、增加postcss.config.js配置文件;

  代码如下:  

 module.exports = {
plugins: [
require('autoprefixer')({overrideBrowserslist: ['> 0.15% in CN']})// 自动添加css前缀
]
}

  配置文件注释写的很清楚,大家可以自己尝试一下哈~~!

五、打包完的目录结构

 基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离

注意:当入口没有定义为多个时,CSS文件会始终合并成一个main文件

源码目录:https://github.com/James-14/webpack4_multi_page_demo

写的不对之处请大家批评指正~~~~!!!!!!

文章原创,转载请注明出处,谢谢!

上一篇:【转】ASP.NET MVC 4 RC的JS/CSS打包压缩功能


下一篇:vue开发中,build时css打包报错