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

本节主要介绍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文件；

　　　代码如下：

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前缀
    ]
  }

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

五、打包完的目录结构

 　

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

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

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

 

文章原创，转载请注明出处，谢谢！