webpack学习的第二天（Day：19）

继续学习webpack

今天是从0开始配置这些文件

1、初始化包描述文件

npm init -y

2、下载webpack依赖到开发环境中

npm i webpack webpack-cli -D

3、指定打包入口文件，且是以开发模式

npx webpack ./src/main.js --mode=development 会生成一个dist目录，里面的main.js文件就是打包好的内容。

4、五大核心点上一篇博客已经了解了

5、写好webpack.config.js

然后打包使用npx webpack运行

6、处理样式资源（这部分和昨天内容类似，不过我今天重新看了一下，昨天没有注意一些细节）

由于webpack本身只能识别js资源，不能识别样式资源，所以我们需要借助loader来帮助webpack来解析样式资源这部分昨天做过练习，不过不是很明白要用什么资源，就要先去创建一个，

.box1{
    width: 100px;
    height: 100px;
    background-color: brown;
}

然后在main.js中进行引用

import count  from "./js/count";
import sum from "./js/sum";
//想要webpack打包资源，必须引入该资源
import "./css/index.css"

console.log(count (1,2));
console.log(sum(1,2,3,4));

然后下载对应的loader，在配置文件当中添加就行

npm install --save-dev css-loader

 //loader加载器
    module:{
        rules:[
            //loder的配置
            {
                test: /\.css$/i,    //只检测.css文件
                use: [//执行顺序，从右到左，从下到上
                    'style-loader',//将js中css通过创建style标签添加到html文件中生效 
                 'css-loader'//作用:将css资源编译为commonjs的模块到js中
                ],
            },
        ],
    },

其他的一模一样，，，

7、图片资源的处理

图片资源的打包不需要像上面那么麻烦，因为webpack5已经把这部分功能内置了只需要在css文件中引入图片地址，直接打包就行

当然还有一些特殊的操作，需要看官档，比如把图片转为base64的方法

8、eslint：

ESLint（ECMAScript Lint的缩写）是一个用于在 JavaScript 代码中发现和修复问题的静态代码分析工具。它能够帮助开发人员捕捉一些常见的错误，强制执行一致的代码风格，并提供一些最佳实践的建议。

webpack把这部分变为了插件了

安装：npm install eslint-webpack-plugin --save-dev

然后配置

 new ESLintPlugin({
            //检测那些文件
            context:path.resolve(__dirname,"src"),

        }),

最后需要写一个 .eslintrc.js文件

module.exports = {
    extends:["eslint:recommended"],
    env:{
        node: true,//启用node中全局变量
        browse:true,
    },
    parserOptions:{
        ecmaVersion:6,//es6
        sourceType:"module",//es module
    },
    reles:{
        "no-var" : 2,//不能使用var变量
    },
};

后续任务：继续学习webpack的相关内容。

XJQ124 / Some-notes