Webpack基本使用和基本配置

Webpack

模块化含义

前端的开发讲究的是全部划分为模块，模块分的越细越好。经常出先一个js文件就是一个模块，

es6规范：AMD和CMD

• 使用import导入，使用export default 导出

commonjs规范

• 使用require导入。使用module_exprots导出

模块化带来的问题

效率问题:换分为详细的模块后，浏览器在加载的时候必须要加载更多的js文件

兼容性问题：浏览器去使用的时候只能使用es6规范，不能使用commenjs规范，浏览器不支持npm下载的包

前端工程化问题

效率，兼容性，代码可维护性，拓展性等非业务问题，都被称为前端工程化问题

• 问：在node服务中，为甚这些问题就没有这么明显，但是在客户端（浏览器）就不是很明显？
  答：node可以直接读取本地文件，根本就不需要用到服务请求，效率就会比浏览器快很多

开发时态，运行时态

开发时态

• 1,模块分的越细越好
  2,支持多模块标准
  3,支持更多的包管理
  4,顺便能够解决一点工程化问题

运行时态

• 1,文件越少越好
  2,文件越小越好
  3,代码越乱越好（避免抄袭代码）
  4,兼容性
  5,最主要的还是执行的效率

webpack安装命令

npm install webpack --save-dev

npm install webpack-cli --save-dev

webpack是干什么的？

webpack 基于模块化的打包构建工具，他把一切都视为模块，通过开发时态的一个入口文件，分析出里边的依赖关系，经过一系列过程（压缩，合并）形成最终运行时态的文件

webpack的特点

1,为前端工程化而生

2,简单易用
3,生态圈强大
4,基于模块化（es6，commenjs）
5,基于node

webpack的使用

默认情况下，他会把src/index.js作为入口文件，然后分析依赖关系，打包到dist/mian.js文件中

打包命令：npx webpack

一般情况下，会在package.json文件的scripts属性中配置打包命令

webpack配置文件

一般会在webpack.config.js文件中配置文件

• 在文件中只能使用commenjs规范,因为webpack是基于node的

基本配置

• mode：配置编译模式（开发 development，生产 production）（字符串）

• entry:配置入口文件（对象）

  • 使用对象是为了和出口配置相互配合

• output：配置指定编译结果的文件（对象形式）

  • 配置打包的文件夹（默认是dist文件夹）
    path:‘url’(这里的路径必须是绝对路径，然后加上文件夹的名称)

  • 配置文件名（默认是filename:main.js）

    • 静态规则：直接写死（index.js）

    • 动态规则，一般有多个入口文件

      • [name] 入口文件中的属性名映射规则

      • [chunkhash] 里面每一个chunk都有自己独立的hash

      • [hash] 整个先过目打包任务的hash值

      • [id] 不推荐使用 开发模式中是字符串跟name没区别，生产模式才是数字id

         entry: {
                index: './src/index.js',
                a: './src/a.js'
            },
            //修改输出的文件名
            output: {
                // 设置输出的文件夹
                path: path.resolve(__dirname, 'ddist'),
                // 静态规则
                // filename: 'index.js'
        
                // 因为入口文件有多个，所以出口文件也要有多个，所以要使用动态规则
                // filename: '[name].js' //[name].js 中的name与入口文件中对象的属性名一一对应
                // filename: '[hash].js', //[hash]是webpack在编译时产生的，所有文件的hash都一样
                filename: '[chunkhash].js', //[chunkhash] 是每个文件在进行编译时独有的，如果文件中代码没有改变，再去打包时，默认的会在缓存中找，因此，不改变代码就打包的chunhash都一样
                // filename: '[id].js' //[id] 是每个文件在进行编译时独有的，如果文件中代码没有改变，再去打包时，默认的会在缓存中找，因此，不改变代码就打包的id都一样
            }
        

• devtool：配置源码地图，打包后可以看出错误信息的详细地址

  • sourceMpa：源码地图 不会出现在生产模式中
    1，sourceMap文件夹非常大，占用网络资源
    2，代码安全性差，会暴露源代码

• loader

  • loader是webpack用来预处理模块的，默认的webpack只能处理js代码，处理其他文件时就需要loader加载器了，比如css，ts文件等

 // 配置加载器
    module: { //加载loader属性
        rules: [ //配置规则，里边的每个对象都有对应的规则
            {
                test: /index\.js$/g, //test中必须写正则
                // use: {
                //     loader: './loader/style_loader.js', //加载器的路径
                // }
                // use简写：
                use: ['./loader/style_loader.js']
            }

        ]
    }