webpack学习记录

学习地址：https://www.bilibili.com/video/BV1zq4y1p7ga?p=10&spm_id_from=pageDriver

webpack:前端工程化具体解决方案

提供了前端模块化开发支持，以及代码压缩混淆处理浏览器端js兼容性，以及性能优化

1.安装 webpack

命令：npm: install [email protected] [email protected] -D

2.项目中配置 webpack

(1).在项目根目录中，创建名为 webpack.config.js的webpack配置文件，并初始化如下配置：

module.exports = {
  mode:"development" //node 用来指定构建模式的 参数有development(开发环境)、production（上线环境）
}

(2).在package.json的 scripts 节点下，新增 dev 脚本

"scripts":{
  "dev":"webpack" //scripts节点下的脚本可通过 npm run 执行
}

(3).在终端中运行 npm run dev 命令 启动webpack进行项目的打包构建

执行配置成功 项目会多一个 dist/main.js 文件夹

项目结构

3.打包约定：

（1）.默认打包入口文件 ： src文件夹 ---> index.js

（2）.默认输出文件路径 ： dist文件夹 ---> main.js

注意：可在webpack.config.js中修改默认约定

4.自定义打包的入口与出口：

在webpack.config.js的配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口

const path = require('path') //导入node.js中操作路劲的模块
module.exports = {
  entry : path.join(__dirname,'./src/index.js'),
  path : path.join(__dirname,'./dist'),
  filename : 'boudle.js' //输出的文件的名称
}

5.webpack插件

（1）.webpack-dev-server

类似：node.js中的nodemon工具 每当修改了源代码 webpack会自动进行项目的打包和构建

安装：

npm install [email protected] -D

配置使用：

（1）修改package.json --》scripts中的 dev 命令如下

"scripts":{
  "dev":"webpack serve"   //scripts 节点下的脚本， 可以通过npm  run 执行
}

（2）再次运行 npm run dev 命令 ，重新进行项目的打包
（3）浏览器中访问http://localhost:8080地址，查看自动打包的效果
（4）测试效果 : 《script》 需要地址引入需要注意 （html 也需要在 http://localhost:8080 中查看修改后的效果）

理解红色框

注意：webpack -dev- serve 会启动一个实时打包的http服务器

（5）decServe节点：webpack.configi.js 可以通过devServe节点对 webpack-dev-server插件进行更多的配置，示例：

devServer:{
  open:true, //初次打包完成后 自动打开浏览器
  host:'127.0.0.1', //实时打包所使用的主机地址
  port:80 //实时打包所使用的端口号
}

（2）.html-webpack-plugin

类似：node.js中的nodemon工具 每当修改了源代码 webpack会自动进行项目的打包和构建

安装：

npm install [email protected] -D

配置使用：在 webpack.config.js 文件添加以下内容

//（1）导入 html-webpack-plugin这个插件 得到一个插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
//（2）new构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    //指定要复制哪个页面
    template:'./src/index.html', //指定复制哪个页面
    filename:'./index.html' //指定复制出来的文件名和路径  
});
module.exports = {
  mode:'development',
  plugins:[htmlPlugin] // 3.通过 plugins 节点，使 htmlPlugin 插件生效
}