webpack的入门

webpack的主要作用：将多个js文件进行合并，对代码进行压缩混淆，将一个浏览器不支持的规范，编译成浏览器可以识别的js文件

现在的需求是使用原生js进行页面的设计，在代码压缩混淆这一块不知道该怎么做，最后选择了使用webpack对代码进行压缩混淆

一：零配置打包：

1.首先是安装webpack

npm install webpack webpack-cli -D

然后既可以实现零配置对代码进行压缩，直接运行执行

npx webpack

但是零配置的限制是，需要压缩的文件必须放在根目录下的src文件夹里面，打包出来的必须是dist文件，无法自己选择打包的配置

二：自己处理配置

1.entry（入口）

2.output（输出）

3.loader（用于对模块的源代码进行转换）

4.plugins（插件，解决loader不你那个解决的事情）

5.mode  指定是开发模式还是生产模式，确定代码是否需要压缩混淆，默认为 production

**********************************************************************************************

新建：webpack.config.js   文件

-----------------将webpack命令配置进package.json中，

因为在一个项目中的配置文件是有多个的，需要指定生产的配置文件和开发阶段不同的配置

不同的命令为：
npx webpack --config  webpack.config.js
然后配置在package.json文件里面的script标签里面指定命令

"build":"webpack --config webpack.configcustom.js"
这个后面命令加不加npx都可以，因为npm会直接进入node_modules里面执行命令

代码的热更新：

1.watch

第一种：
在package.json文件的script里面增加一个新的配置：
"watch":"webpack --watch"
就可以实现修改src下面的代码后，打包的js文件跟着更新，体验甚好


第二种方法：
在配置文件mode平级的添加一个watch：true，同样运行npm run build也可以开启热更新状态

2.官方推荐：webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

1.安装devServer
npm i webpack-dev-server -D

运行
webpack-dev-server

也可以在script里面添加一个配置：
"dev": "webpack-dev-server --mode development"

这里需要注意一点就是  webpack-cli的版本，最新的不能用，用的
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"  这个版本的可以。

还有一个问题就是通过这种dev-server的方法打包出来的js文件是存在在内存中的，是在文件的根目录，所以在index文件中引入的js文件的路径需要更换一下

然后是配置项mode平级的一个配置
 devServer:{
        // 运行之后直接打开
        open:true,
        // 打开热更新，就是只更新你修改的局部的代码
        hot:true,
        // 开启gzip压缩
        compress:true,
        // 启动的express服务器的宽口
        port:3001,
        // 运行跑起来的index.html的文件的目录
        contentBase:"./"
    }

这个入口出口就是你要使用的js文件，然后再html-webpack-plugin里面配置html文件，最后结合一下，真的好用

插件的学习：

两部曲：
1.npm安装插件

2.配置文件mode同级目录，增加数组  plugins

html插件的使用：

安装 
npm i html-webpack-plugin -D
人后同级配置：
 plugins:[
        new HtmlWebpackPlugin({
            // 复制出来的html文件，会默认引入js代码
            filename:"index.html",
            // 要处理的html文件地址
            template:"./src/index.html"
        })
    ]

总结作用：

在执行devserver的时候：
1.会自动在文件根目录复制一个index.html(类似于devserver生成在内存中的bundle.js)

2.打包时会自动引入打包出来的js文件

在build的时候：

打包会自动生成index.html并且引入js文件

 

 

 

-----------------------------------------------------------------------------------

附上配置文件：

// const { dirname } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        // 输出路径必须是绝对路径
        path: path.resolve('./home/'),
        // path:path.join(__dirname,'./home/'),
        filename: "bundle.js"
    },
    mode: "development", //默认是 production
    // watch: true
        // filename:''
    // webpack-dev-server的配置
    devServer:{
        // 运行之后直接打开
        open:true,
        // 打开热更新，就是只更新你修改的局部的代码
        hot:true,
        // 开启gzip压缩
        compress:true,
        // 启动的express服务器的宽口
        port:3001,
        // 运行跑起来的index.html的文件的目录
        contentBase:"./"
    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制出来的html文件，会默认引入js代码
            filename:"index.html",
            // 要处理的html文件地址
            template:"./src/index.html"
        })
    ]
}

webpack-dev-middleware

这个插件是一个容器，可以更加单独的来自己创建一个服务器，以便根据自己的设置来实现更多的需求

webpack-dev-server内部使用的就是这个插件 

1. 安装 express 和 webpack-dev-middleware：
   npm i express webpack-dev-middleware -D
2. 新建server.js
       const express = require('express');
       const webpack = require('webpack');
       const webpackDevMiddleware = require('webpack-dev-middleware');
       const config = require('./webpack.config.js');
       
       const app = express();
       const compiler = webpack(config);
       
       app.use(webpackDevMiddleware(compiler, {
         publicPath: '/'
       }));
       
       app.listen(3000, function () {
         console.log('http://localhost:3000');
       });
3. 配置package.json中的scripts:"server": "node server.js"
4. 运行: npm run server

注意: 如果要使用webpack-dev-middleware, 必须使用html-webpack-plugin插件, 否则html文件无法正确的输出到express服务器的根目录

Loader

样式的处理

（用于对模块源代码的处理）

css文件的压缩处理

1. 安装npm i css-loader style-loader -D
2. 配置webpack.config.js
  module: {
    rules: [
      // 配置的是用来解析.css文件的loader(style-loader和css-loader)
      {
        // 用正则匹配当前访问的文件的后缀名是  .css
        test: /\.css$/,
           //css-loader  解析css文件
            //style-loader  将解析出来的css文件放在html文件中
        use: ['style-loader', 'css-loader'] // webpack底层调用这些包的顺序是从右到左
      }
    ]
  }

less scss文件的预处理

安装：npm i less less-loader sass-loader node-sass -D

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
sacc文件可能是sacc或者scss结尾的

{ test: /\.s(a|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

图片的处理

1.安装
npm i file-loader -D
2.使用
{
            test: /\.(jpg|jpeg|png|bmp|gif)$/,
            use: 'file-loader'
        }
//use 中使用的loader如果只有一个的话，可以不用写数组，直接写一个字符串就可以

字体图标子类的也是使用file-loader来处理
{
            test: /\.(woff|woff2|eot|svg|ttf)$/,
            use: 'file-loader'
        }

使用 url-loader 的一些配置的图片处理

url-loader
安装： npm i url-loader -D
url-loader封装了file-loader, 所以使用url-loader时需要安装file-loader

{
            test: /\.(jpg|jpeg|png|bmp|gif)$/,
            use: {
                loader:'url-loader',
                options:{
                    // 图片或者文件小于5kb就会转换成base64的格式展示，
                    //base64的文件会比普通的文件大30%，但是可以节省一次http请求
                    limit:5*1024,
                        // 图片打包出来的路径
                        outputPath: 'images',
                        // 打包出来的图片的名称  name:图片的原名  hash 使用hash算法的唯一一段名称   :6 不取完整的hash，只要前六位    ext图片的后缀名
                        name: '[name][hash:6].[ext]'
                }
            }
        }

处理js文件的babel-loader

将一些高级的语法转换为浏览器可以识别的语法

安装：
npm i babel-loader @babel/core @babel/preset-env webpack -D

webpack已经安装过了，就不用再次安装了

配置文件设置：
{
                test:/\.js$/,

                use:{
                    loader:"babel-loader",
                    options:{
                        presets:['@babel/env']
                    }
                }
            }

然后就可以将一个高级的语法转换为浏览器可以识别的es5或者更低的语法

如果你有一些更高级别的语法，比如说在类中增加一个静态成员

class Dog {
    name= '大黄'
    static color = 'yellow'
}
let d = new Dog()
console.log(d)
console.log(Dog)

上面这样的语法，运行的时候webpack是识别不了的，但是他会提示你装这种的高级语法对应的包
或者直接来官网 https://www.babeljs.cn/docs/plugins  查找对应的语法所需要的plugin文件，安装即可



这个使用的包是 @babel/plugin-proposal-class-properties
所以还是同样的步骤
1.安装：
npm i @babel/plugin-proposal-class-properties -D
然后在bebel的配置文件中增加一个plugin，如下：
{
                test:/\.js$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:['@babel/env'],
//高级语法的配置项
                        plugins:['@babel/plugin-proposal-class-properties']
                    }
                },
                // 不要对node_modules的文件进行处理
                exclude:/node_modules/
            }

对于  generator  的操作

主要使用的插件   @babel/plugin-transform-runtime 

1.安装：
npm i @babel/plugin-transform-runtime -D
//这个是安装的运行依赖
npm i  @babel/runtime -S

2.配置文件
{
                test:/\.js$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:['@babel/env'],
                        plugins:[
                            '@babel/plugin-proposal-class-properties',
                            '@babel/plugin-transform-runtime'
                        ]
                    }
                },
                // 不要对node_modules的文件进行处理
                exclude:/node_modules/
            }

将bebel的配置从webpack的配置中独立出来。方便管理

项目根目录新建一个  .babelrc.json  文件，然后将webpack里面你写的babel的配置移动到这个文件中，注意是json格式的：
{
    "presets":["@babel/env"],
    "plugins":[
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-runtime"
    ]
}

然后将webpack中关于babel的配置文件删除掉就可以
{
                test:/\.js$/,
                use:{
                    loader:"babel-loader"
                },
                // 不要对node_modules的文件进行处理
                exclude:/node_modules/
            }

如上所示：

使用babel将一些对象原型的方法的转换：

这里主要是因为js是动态语言，所以对象上面的一些方法必须等运行起来才知道有没有，这是使用的babel是 @babel/polyfill

原理就是在低级的浏览器上面重写一个你想要用的方法，来让你是使用

1.安装
npm i @babel/polyfill -S
2.使用
在你使用一些es6 es6 新方法的地方直接引入就可以了
import '@babel/pulyfill'

最后是source-map的使用，

webpack配置文件的根目录增加一个配置项：

生产环境推荐使用：

devtool:'cheap-module-eval-source-map'

开发环境推荐使用：

不适用

再来一个打包的时候的方便的插件

clean-webpack-plugin

作用就是在npm run build 的时候会先将之前打包的文件删除掉

1.安装
npm i clean-webpack-plugin -D

2.配置plugin 模块
  引入：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

在plugin模块中new 这个构造函数
 plugins: [
        new HtmlWebpackPlugin({
            // 复制出来的html文件，会默认引入js代码
            filename: "index.html",
            // 要处理的html文件地址
            template: "./src/index.html"
        }),
        new CleanWebpackPlugin()
    ],

完事。

对于静态资源的处理

copy-webpack-plugin

作用就是  将文件中引入的一些静态资源复制到打包出来的文件中

1.安装
npm i copy-webpack-plugin -D

2.引入插件

const copyWebpackPlugin = require('copy-webpack-plugin')

3.在plugin节点进行配置

  new CopyWebpackPlugin([
      {
        from: path.join(__dirname, 'assets'),
        to: 'assets'
      }
    ])

给打包的js文件文件加上版本注释信息

BannerPlugin

这是一个内置的插件，不需要安装，直接引入即可

1.引入
const webpack = require('webpack')
2.使用
new webpack.BannerPlugin('kcccc')