fix: 修复开发模式样式不更新

luoxue-victor · Apr 8, 2021 · 729bbd5 · 729bbd5
1 parent 4057d9b
commit 729bbd5
Show file tree

Hide file tree

Showing 28 changed files with 673 additions and 344 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,8 @@
   "devDependencies": {
     "@pkb/cli": "^1.4.7",
     "@pkb/plugin-react": "^1.4.5",
-    "@pkb/webpack-box": "^1.4.6"
+    "@pkb/webpack-box": "^1.4.6",
+    "style-loader": "^2.0.0"
   },
   "bugs": {
     "url": "https://github.com/luoxue-victor/learn_webpack/issues"

diff --git a/packages/react/template/__test__/__snapshots__/demo.test.js.snap b/packages/react/template/__test__/__snapshots__/demo.test.js.snap
diff --git a/packages/react/template/__test__/demo.test.js b/packages/react/template/__test__/demo.test.js
diff --git a/packages/webpack-box/build/dev.js b/packages/webpack-box/build/dev.js
@@ -8,6 +8,7 @@ module.exports = function (options) {
   const port = options.port || 8080
   const publicPath = options.publicPath || '/'
 
+  config.target('web')
   config.devServer
     .quiet(true)
     .hot(true)
@@ -21,6 +22,7 @@ module.exports = function (options) {
   }
 
   const compiler = webpack(config.toConfig())
+
   // 拿到 devServer 参数
   const chainDevServer = compiler.options.devServer
   const server = new WebpackDevServer(

diff --git a/packages/webpack-box/commands/build.js b/packages/webpack-box/commands/build.js
@@ -8,6 +8,7 @@ module.exports = function({ injectCommand }) {
       .option('-r, --report', '打包分析报告')
       .option('-d, --dll', '合并差分包')
       .action(async (name, cmd) => {
+        process.env.NODE_ENV = 'production'
         const options = cleanArgs(cmd)
         const args = Object.assign(options, { name }, boxConfig)
         if (!name && boxConfig.pages) {

diff --git a/packages/webpack-box/config/base.js b/packages/webpack-box/config/base.js
@@ -19,7 +19,7 @@ module.exports = ({ config, webpackVersion, resolve, options }) => {
       })
       // 模式 "production" | "development" | "none"
       // .mode(process.env.NODE_ENV) 等价下面
-      .set('mode', 'development') // process.env.NODE_ENV
+      .set('mode', process.env.NODE_ENV) // process.env.NODE_ENV
       // 出口
       .output
       .path(resolve(output))

diff --git a/packages/webpack-box/config/style.js b/packages/webpack-box/config/style.js
@@ -1,4 +1,6 @@
 // [样式表配置]
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 module.exports = ({ config, options = {} }) => {
   const rootOptions = options
   const getAssetPath = require('../util/getAssetPath')
@@ -45,20 +47,25 @@ module.exports = ({ config, options = {} }) => {
       const cssLoaderOptions = Object.assign({
         sourceMap
       }, loaderOptions.css)
-      if (extract) {
+
+      const isDev = process.env.NODE_ENV === 'development'
+
+      console.log('========isdev========',isDev)
+
+      if (isDev) {
         rule
           .use('extract-css-loader')
-          .loader(require('mini-css-extract-plugin').loader)
+          .loader('style-loader')
           .options({
-            publicPath: cssPublicPath
+            injectType: 'styleTag'
           })
       } else {
-        // rule
-        //   .use('vue-style-loader')
-        //   .loader(require.resolve('vue-style-loader'))
-        //   .options({
-        //     sourceMap
-        //   })
+        rule
+          .use('extract-css-loader')
+          .loader(MiniCssExtractPlugin.loader,)
+          .options({
+            publicPath: cssPublicPath
+          })
       }
       if (isCssModule) {
         cssLoaderOptions.modules = {

diff --git a/packages/webpack-box/package.json b/packages/webpack-box/package.json
@@ -85,7 +85,7 @@
     "sass": "^1.23.7",
     "sass-loader": "^8.0.0",
     "semver": "^7.1.1",
-    "style-loader": "^1.0.0",
+    "style-loader": "^2.0.0",
     "style-resources-loader": "^1.3.2",
     "stylus-loader": "^3.0.2",
     "thread-loader": "^2.1.3",

diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,4 @@
 // 加载react
 if (process.env.REACT === 'react') {
-  require('../packages/react/template')
+  require('../template/webpack/main.js')
 }
diff --git a/template/gulp/index.js b/template/gulp/index.js
diff --git a/template/rollup/index.js b/template/rollup/index.js
diff --git a/template/webpack/main.js b/template/webpack/main.js
@@ -0,0 +1,6 @@
+// 加载react
+import React from 'react'
+import ReactDom from 'react-dom'
+import { App } from './src/demo'
+
+ReactDom.render(<App/>, document.getElementById('app'))
diff --git a/template/webpack/src/demo.js b/template/webpack/src/demo.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import './index.scss'
+
+export const App = () => {
+  return (
+    <div className="react-box">
+      <h1>React Demo</h1>
+      <img className="react-logo" src={require('./assets/my-pub.jpeg').default} alt=""/>
+    </div>
+  )
+}
diff --git a/template/webpack/src/globalstyle/index.less b/template/webpack/src/globalstyle/index.less
diff --git a/template/webpack/src/globalstyle/index.scss b/template/webpack/src/globalstyle/index.scss
diff --git a/template/webpack/src/index.scss b/template/webpack/src/index.scss
@@ -0,0 +1,9 @@
+.react-box {
+  width: 100%;
+  text-align: center;
+}
+
+.react-logo {
+  width: 200px;
+  height: 200px;
+}
diff --git a/template/webpack/src/main.js b/template/webpack/src/main.js
diff --git a/template/webpack/src/ssr.jsx b/template/webpack/src/ssr.jsx
diff --git a/template/webpack/src/style/app.css b/template/webpack/src/style/app.css
diff --git a/template/webpack/src/style/index.css b/template/webpack/src/style/index.css
diff --git a/template/webpack/src/style/index.js b/template/webpack/src/style/index.js
diff --git a/template/webpack/src/style/index.less b/template/webpack/src/style/index.less
diff --git a/template/webpack/src/style/index.postcss b/template/webpack/src/style/index.postcss
diff --git a/template/webpack/src/style/index.scss b/template/webpack/src/style/index.scss
diff --git a/template/webpack/src/treeShaking.js b/template/webpack/src/treeShaking.js
diff --git a/template/webpack/src/typescript/Foo.ts b/template/webpack/src/typescript/Foo.ts
diff --git a/template/webpack/src/typescript/index.ts b/template/webpack/src/typescript/index.ts