css treeshaking打包后报错

来源:3-16 由浅入深 webpack - Tree-shaking - CSS Tree-shaking

肖恩不是小羊

2018-08-15

npm purifycss-webpack 和 glob-all后

var PurifyCss = require('purifycss-webpack')
var glob = require('glob-all')


new PurifyCss({
    paths: glob.sync([
        path.join(__dirname, './*.html'),
        path.join(__dirname, './src/*.js')
    ])
}),


 打包报错

Error: Cannot find module 'purify-css'

然后我安装了purify-css后打包后继续报错 


(node:5930) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
Hash: ae9bb1179ab8a3619b8b
Version: webpack 3.10.0
Time: 1289ms
        Asset     Size  Chunks             Chunk Names
app.bundle.js  74.1 kB       0  [emitted]  app
   [0] ./src/app.js 287 bytes {0} [built]
   [1] ./src/css/base.less 1.03 kB {0} [built] [failed] [1 error]
   [2] ./src/common/util.js 234 bytes {0} [built]
   [4] (webpack)/buildin/global.js 509 bytes {0} [built]
   [5] (webpack)/buildin/module.js 517 bytes {0} [built]
   [6] ./node_modules/css-loader!./node_modules/postcss-loader/src?{"ident":"postcss","plugins":[{"version":"6.0.23","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"postcss-cssnext","postcssVersion":"6.0.23"}]}!./node_modules/less-loader/dist/cjs.js!./src/css/base.less 248 bytes [built] [failed] [1 error]
    + 3 hidden modules
ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/src?{"ident":"postcss","plugins":[{"version":"6.0.23","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"postcss-cssnext","postcssVersion":"6.0.23"}]}!./node_modules/less-loader/dist/cjs.js!./src/css/base.less
Module build failed: 
    background-color: greenyellow
    border: 1px solid #000;
        ^
Unrecognised input
      in /Users/jixiang/workspace/learning-text/6-webpack-treeShaking/src/css/base.less (line 19, column 10)
 @ ./src/css/base.less 2:14-176
 @ ./src/app.js
ERROR in ./src/css/base.less
Module build failed: ModuleBuildError: Module build failed: 
    background-color: greenyellow
    border: 1px solid #000;
        ^
Unrecognised input
      in /Users/jixiang/workspace/learning-text/6-webpack-treeShaking/src/css/base.less (line 19, column 10)
    at runLoaders (/Users/jixiang/workspace/learning-text/6-webpack-treeShaking/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/jixiang/workspace/learning-text/6-webpack-treeShaking/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/jixiang/workspace/learning-text/6-webpack-treeShaking/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/jixiang/workspace/learning-text/6-webpack-treeShaking/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at <anonymous>
    at runMicrotasksCallback (internal/process/next_tick.js:121:5)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./src/css/base.less
 @ ./src/app.js
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/postcss-loader/src/index.js??postcss!node_modules/less-loader/dist/cjs.js!src/css/base.less:
       [0] ./node_modules/css-loader!./node_modules/postcss-loader/src?{"ident":"postcss","plugins":[{"version":"6.0.23","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"postcss-cssnext","postcssVersion":"6.0.23"}]}!./node_modules/less-loader/dist/cjs.js!./src/css/base.less 248 bytes {0} [built] [failed] [1 error]
    
    ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/src?{"ident":"postcss","plugins":[{"version":"6.0.23","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"postcss-cssnext","postcssVersion":"6.0.23"}]}!./node_modules/less-loader/dist/cjs.js!./src/css/base.less
    Module build failed: 
    
        background-color: greenyellow
        border: 1px solid #000;
            ^
    Unrecognised input
          in /Users/jixiang/workspace/learning-text/6-webpack-treeShaking/src/css/base.less (line 19, column 10)


写回答

1回答

qq_修炼者_0

2018-08-15

base.less文件里background-color结尾的分号没写

1
1
肖恩不是小羊
妈耶,在这种地方丑陋了… 感谢
2018-08-15
共1条回复

四大维度解锁Webpack3.0前端工程化

前端开发标配,灵活掌握Webpack3.0的使用可以极大的提高前端开发的效率

1188 学习 · 403 问题

查看课程