Webpack初识

什么是webpack

Webpack是前端工程化工具。Webpack 作为老大哥，在前端社区也算站稳了脚跟，它提供了许多配置和插件，让开发者定制化构建项目。

使用步骤

1. 初始化项目

yarn init -y

初始化完毕后可以看到多一个json文件。

2. 安装依赖

yarn add webpack webpack-cli -D

3. 在项目中创建 src目录，编写代码

创建src目录/index.js 文件参考：

创建并编写默认的webpack.config.js文件

webpack.config.js

module.exports = {
    mode:'production',
}

4. 打包

yarn webpack

可以看到打包后的文件在dist目录

配置文件webpack.config.js

Webpack提供配置项和插件系统，允许我们在webpack.config.js文件中进行各种配置，从而帮助我们定制化构建项目。

mode

设置打包的模式，production为生产模式，development为开发模式

module.exports = {
   mode:'production'
}

entry

指定打包入口文件，默认为./src/index.js

module.exports = {
   entry:'./src/a.js',
}

指定打包入口为a.js编译后查看如上图所示，达到预期效果。

指定打包入口文件为['./src/a.js','./src/b.js'] 数组

entry:['./src/a.js','./src/b.js']

指定打包入口文件为对象且多个文件

entry:{
    aa:'./src/a.js',
    bb:'./src/b.js',
},

Webpack 会将value文件打包成key.js文件，比如上述例子会将'./src/a.js'文件打包成aa.js文件、'./src/b.js'件打包成bb.js文件。

output

对打包后的文件进行配置，默认打包文件地址为./dist/main.js

const path = require('path')
module.exports = {
   output:{
       filename: "bundle.js", //打包后的文件名
       clean: true, //每次打包前清除上次打包的文件
       path: path.resolve(__dirname, 'hello'), //打包后的文件存放路径，必须要绝对路径
   }
}

loader

Webpack默认情况下，只会处理 js 文件，如果我们希望它可以处理其他类型的文件，则要为其引入loader

以css为例，如果我们不进行任何操作

 

如上所示，创建一个测试的样式文件然后js引入使用。

//直接将css引入到js中
import './style/index.css';
document.body.insertAdjacentHTML('beforeend', '<h1>hello webpack</h1>');

此时直接打包：

报错了，Webpack说读不懂。

所以下面我们需要安装解析css文件的loader：

yarn add css-loader

配置loader，rules是一个数组，允许我们配置多个loader，test属性是一个正则表达式，用于匹配对应loader的文件，use属性则是匹配对应loader。

module:{
   rules:[
       {
           test:/\.css$/, //匹配文件
           use:'css-loader'
       },
   ]
}

配置完毕，成功打包，但是页面上并没有样式，但是打包文件中是有样式的啊，为什么就没有显示到页面上呢？

因为loader遵循职责单一原则，一个loader只做一件事情，如果你想在打包的文件中使用上css，光有解析loader还不够，还需要安装另一个loader：

yarn add style-loader

然后配置style-loader：

module.exports = {
   module:{
       rules:[
           {
               test:/\.css$/, //匹配文件
               use:['style-loader','css-loader'] //从后往前执行,有顺序要求
           },
       ]
   }
}

document.body.onclick(()=>{
   alert('hello webpack')
})

打包后发现还是箭头函数。

于是我们安装babel-loader以及一些配置：

yarn add -D babel-loader @babel/core @babel/preset-env

配置

module:{
   rules:[
       {
           test: /\.m?js$/, //以.mjs或js后缀的文件
           exclude: /(node_modules|bower_components)/, //排除node_modules中的文件
           use: {
               loader: 'babel-loader',
               options: {
                   presets: ['@babel/preset-env'] //根据目标浏览器或运行时环境自动选择合适的转换规则
               }
           }
       }
   ]
}

再次测试，成功将箭头函数打包成普通函数。

配置兼容性

我们可以在package.json文件中配置需要兼容的浏览器，详情见 github

"browserslist": [
 "defaults", //默认
 "ie <= 11", //ie版本低于11
 "last 2 versions", //至少存在两个版本
 "> 1%", //市场占有率大于1%
 "iOS 7",
]

yarn add -D html-webpack-plugin

plugins:[
   //自动创建html文件
   new HTMLPlugin({
       title:'Hello Webpack', //配置html文件的标题
       template:'./src/index.html' //以哪个文件为模版创建
   })
]

当我们再次打包，就会自动生成包含对应配置的html文件。

服务器环境

webpack-cli提供了许多命令帮助我们打包运行项目

yarn webpack

每次修改源码都需要重新打包，太麻烦了，所以需要

yarn webpack --watch

加上--watch后每次修改源码都会被监听到，并且重新打包。

但是这个命令不能完美还原项目上线的场景，因为它访问的是文件目录，而不是服务器。

为此，我们可以安装一个Webpack服务：

yarn add -D webpack-dev-server

当我们运行以下命令，它能够将项目部署到一个开发服务器上：

yarn webpack serve --open

当我们访问本地8080端口，就能够看到我们的项目。

⚠️需要注意的是：这个服务它只会将我们的项目打包并运行在这个服务器，但是本地看不到这个dist的，所以当我们项目调试完毕，还需要自己手动打包一下。

快捷命令

我们一般会将常用的命令配置一下，使用起来更方便：

"scripts": {
 "build": "webpack",
 "watch": "webpack --watch",
 "dev": "webpack serve --open"
},

执行命令参考：

yarn build //构建脚本
yarn dev //dev脚本

webpack yarn npm

http://blog.xqlee.com/article/2408051610045310.html