webpack样式失效，打包生产环境，开启cssModule

一、webpack打包生产环境样式失效：
1.1）生产环境中，webapck把我的样式文件删掉了，原因在于tree-share，补补知识：
1.1.1）tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。新的 webpack 4 正式版本，扩展了这个检测能力，通过 package.json 的 “sideEffects” 属性作为标记，向 compiler 提供提示，表明项目中的哪些文件是 “pure(纯的 ES2015 模块)”，由此可以安全地删除文件中未使用的部分。

1.2）添加一个通用模块

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
+ |- math.js
|- /node_modules

src/math.js

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

src/index.js只引入cube不需要square

- import _ from 'lodash';
+ import { cube } from './math.js';

  function component() {
-   var element = document.createElement('div');
+   var element = document.createElement('pre');

-   // lodash 是由当前 script 脚本 import 导入进来的
-   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.innerHTML = [
+     'Hello webpack!',
+     '5 cubed is equal to ' + cube(5)
+   ].join('\n\n');

    return element;
  }

  document.body.appendChild(component());

webpack编译后的dist/bundle.js ，也只有cube

/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
function cube(x) {
  return x * x * x;
}

这种方式是通过 package.json 的 “sideEffects” 属性来实现的。

{
  "name": "your-project",
  "sideEffects": false
}

**

注意，任何导入的文件都会受到 tree shaking 的影响。这意味着，如果在项目中使用类似 css-loader 并导入 CSS
文件，则需要将其添加到 side effect 列表中，以免在生产模式中无意中将它删除：

**
所以导致了我题目所说的问题的出现，在给mode: "production"时，webpack把我的样式文件都删除了避免这种问题的出现，需要通过给package.json 的 “sideEffects” 属性来实现的。

  "sideEffects": [
    "*.css",
    "*.less"
  ]

二、开启cssModule
注意开启cssModule后，引用样式不能这样写了import “./App.less”;，要用一个变量import styles from “./App.less”;
上webpack配置：

{
	 test: /\.(css|less)$/,
 	 use: [
     MiniCssExtractPlugin.loader,
     // {
     //   loader: "style-loader",
     // },
     {
       loader: "css-loader",
       options: {
         modules: {
           localIdentName: "[path][name]__[local]--[hash:base64:5]",
         },
       },
     },
     "postcss-loader",
     {
       loader: "less-loader",
     },
   ],
 },

后面样式名称就会被webpack编译混淆