add: cfg.commonCss

lfyfly · lfyfly · commit ba3d91e492f0 · 2018-08-16T11:35:00.000+08:00
diff --git a/README.md b/README.md
@@ -82,5 +82,14 @@ npm run sp
 - pages多级目录支持（忽略下划线开头的文件和文件夹）
   - 当配置文件`webpack.cfg.js`中`build.assetsPublicPath === './' `，二级目录以上页面需要在页面中，增加`<base>`标签进行修正相对路径。如`src/pages/test/test-0.html`中的`<head>`中的`<base href="../" />`
   - 当配置文件`webpack.cfg.js`中`build.assetsPublicPath === '/' `, 则路径为绝对路径，无需修正路径
+
+- 页面共有css文件入口支持
+```
+commonCss:{
+    entry: path.resolve(__dirname,'src/common_css_entry.js'), // String 必填，入口文件，绝对地址
+    exclude:['about'] // Arrary 排除页面，不填所有页面都引入common_css
+    // ['about'] 代表about页面不引用 common_css
+  },
+```
 ## gulp 多页面配置
 [gulp-easy](https://github.com/lfyfly/gulp-easy)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webpack-multi-page",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "webpack webpack4 multi-page multiPage multiplePage",
   "main": "index.js",
   "scripts": {
@@ -11,7 +11,7 @@
     "webp": "gulp webp"
   },
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "devDependencies": {
     "autoprefixer": "^9.0.1",
     "babel-core": "^6.26.3",
diff --git a/src/common_css_entry.js b/src/common_css_entry.js
@@ -0,0 +1,2 @@
+// 只因用样式文件
+import '@/css/_common/common.scss'
diff --git a/src/css/_common/common.scss b/src/css/_common/common.scss
@@ -0,0 +1,3 @@
+body {
+  color: $global-color;
+}
diff --git a/src/css/index/index.scss b/src/css/index/index.scss
@@ -1,6 +1,4 @@
-$color: green;
 body {
-  color: $color;
   background: url(~@/assets/img/test.jpg);
   img{
     width: 100px; 
diff --git a/webpack.cfg.js b/webpack.cfg.js
@@ -1,4 +1,9 @@
+const path = require('path')
 module.exports = {
+  commonCss:{
+    entry: path.resolve(__dirname,'src/common_css_entry.js'), // String 必填，绝对地址
+    exclude:['about'] // Arrary 排除页面，不填所有页面都引入common_css
+  },
   // px2rem:{
   //   remUni:100,
   //   remPrecision: 6
diff --git a/webpack.common.js b/webpack.common.js
@@ -5,11 +5,17 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const { resolve, getEntries, getHtmlWebpackPlugins } = require('./webpack.until.js')
 const cfg = require('./webpack.cfg.js')
+let otherEntries = {}
+// 公共css文件入口
+if (cfg.commonCss && cfg.commonCss.entry) {
+  otherEntries.common_css = cfg.commonCss.entry
+}
 
 module.exports = (env, argv) => {
   console.log(argv.mode, '========================')
   return {
     entry: {
+      ...otherEntries,
       ...getEntries(argv)
     },
     resolve: {  //导入的时候不用写拓展名
diff --git a/webpack.until.js b/webpack.until.js
@@ -5,6 +5,18 @@ const resolve = function (_path) {
   return path.resolve(__dirname, _path)
 }
 const cfg = require('./webpack.cfg')
+
+// 判断当前页面是否包含CommonCssChunk
+function getCommonCssChunk(chunkName) {
+  if (!cfg.commonCss) return []
+  // 无commonCss.exclude，所有页面包含
+  if(!cfg.commonCss.exclude) return  'common_css'
+  //  有commonCss.exclude，不包含在该数组的页面引用
+  if(cfg.commonCss.exclude && !cfg.commonCss.exclude.includes(chunkName)) return 'common_css'
+  // 其他
+  return []
+}
+
 let until = {
   resolve,
   getFileList(targetPath) {
@@ -64,13 +76,13 @@ let until = {
       var reg = /\.[^.]+$/
       if (reg.test(file.filename)) {
         chunkName = file.filename.replace(reg, '')
-        console.log('.' + file.filepath.replace(targetPath, '').replace(reg,'.html'))
+        console.log('.' + file.filepath.replace(targetPath, '').replace(reg, '.html'))
         HtmlWebpackPlugins.push(
           new HtmlWebpackPlugin({
-            baseTagUrl:'../',
+            baseTagUrl: '../',
             template: file.filepath,
-            filename:'.' + file.filepath.replace(targetPath, '').replace(reg,'.html'),
-            chunks: [chunkName].concat(argv.mode === 'production' ? ['vendor', 'commons', 'manifest'] : []),
+            filename: '.' + file.filepath.replace(targetPath, '').replace(reg, '.html'),
+            chunks: [chunkName].concat(getCommonCssChunk(chunkName)).concat(argv.mode === 'production' ? ['vendor', 'commons', 'manifest'] : []),
             inject: true,
             minify: argv.mode !== 'production' ? undefined : {
               removeComments: true,

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// 只因用样式文件`
	`2`	`+import '@/css/_common/common.scss'`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+body {`
	`2`	`+ color: $global-color;`
	`3`	`+}`