基於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文件；

　　　代碼如下：

 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

寫的不對之處請大家批評指正~~~~!!!!!! 

 

文章原創，轉載請註明出處，謝謝！