webpack前端工程化

什么是webpack

webpack是前端工程化具体的解决方案。

webpack它有什么作用呢?

webpack它可以将我们的代码进行压缩处理和处理浏览器端对javascript的兼容性处理以及一些性能优化。

就比如我们的es6中的let定义变量它ie8以下是存在兼容性问题的，经过对webpack的配置，webpack会将let定义的变量进行兼容性处理成var，可以很好解决兼容性问题，我们的就比如css3动画它如果不兼容最多是不显示，但如果js不兼容就直接报错页面一片空白。

js用的语法太高级

我们会想到webpack能不能解决呢?

webpack相关包

webpack@5.42.1
webpack-cli@4.7.2 后面加-D表示明确告诉package 将包记录到devDependencies里面
devDependencies是开发用到，上线不需要用到
dependencies开发上线都需要用到

配置webpack

npm run dev 运行webpack

然后就会生成

最后在index.html中导入main.js就可以呈现效果了

在生成的main.js文件中即有index.js的代码也有jquery.js里的代码他会将我们要兼容的代码进行打包合并转换兼容，webpack.config.js中的module.exports中的mode="development"是不进行压缩的，如果我们将development改为发布模式的话production就会进行压缩。

development和production的区别

development：打包生成时间短，文件体积大，适合开发时用
production:打包时间长，体积文件小，适合发布上线时用

webpack中的默认约定

在webpack4XX和webpack5XX中

默认会找src文件夹中的index.js文件
默认输出在dist文件夹的main.js文件

注意:可以中webpack.config.js中修改打包的默认约定

webpack.config.js文件

const path = require('path')
module.exprots = {
    // 代表webpack运行的模式，可选值有两个development和production  
    // development代表开发模式
    // production代表生产模式
    mode: 'development',
    // entry:指定要处理哪个文件
    entry: path.join(__dirname, "./src/index.js"),
    // 指定生产的文件要存放在哪里
    output: {
        // 存放到目录
        path: path.join(__dirname, 'dist'),
        filename: 'main.js'
    }
}

webpack插件webpack-dev-server

npm install webpack-dev-server@3.11.2 -D

自动监听源代码，Ctrl+s时自动运行webpack

此时我们重新启动 npm run dev

注意:如果启动不了

很大的可能性是webpack-cli的版本不合适

我们重新npm install webpack-cli -D 下包，npm run dev就可以启动了,我当时解决是这样的。

对于安装插件的细节

我们现在不能单纯在文件路径进行访问index.html文件，我们要用本机端口8080来进行访问文件，并且导入的script文件要在/根目录中内存存储的main.js文件进行访问，我们在磁盘是看不到的，但它是插件在内存中生成的。

webpack插件html-webpack-plugin

npm install html-webpack-plugin@5.3.2 -D

配置插件

const path = require('path')
// 导入html-webpack-plugin这个插件,得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定要复制哪个页面
    template: './src/index.html',
    // 指定复制处理的文件名和存放路径
    filename: './index.html'
})
module.exprots = {
    // 代表webpack运行的模式，可选值有两个development和production  
    // development代表开发模式
    // production代表生产模式
    mode: 'development',
    // entry:指定要处理哪个文件
    entry: path.join(__dirname, "./src/index.js"),
    // 指定生产的文件要存放在哪里
    output: {
        // 存放到目录
        path: path.join(__dirname, 'dist'),
        filename: 'main.js'
    },
    // 插件的数组,将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin]
}