对于webpack使用心得
- 一、在项目中安装webpack
- 二、示例
- 三、webpack配置文件
- 四、webpack工作模式
- 五、webpack资源模块加载
- 六、webpack导入资源模块
一、在项目中安装webpack
初始化package.json
yarn init --yes
安装webpack及其核心模块
yarn add webpack webpack-cli --dev
安装webpack-cli后,我们就能通过yarn或者npm执行webpack命令
yarn webpack --version
// 查看webpack和webpack-cli版本,确认安装正常
打包命令
yarn webpack
也可以通过配置package.json中的scripts简化打包命令。
"scripts":{
"build":"webpack"
}
yarn build
二、示例
// heading.js
// ES Module语法
// 导出一个创建节点方法
export default () => {
const element = document.createElement("h2")
element.textContent = "Hello World"
element.addEventListener('click', () => {
alert("hello")
})
return element;
}
// index.js
// 导入一个方法
import createHeading from "./heading.js"
const heading = createHeading()
document.body.append(heading)
<!-- html中引入index.js -->
<script type="module" src="./src/index.js"></script>
执行打包命令
yarn build
在dist目录下生成main.js
// main.js
(()=>{"use strict";const e=(()=>{const e=document.createElement("h2");return e.textContent="Hello World",e.addEventListener("click",(()=>{alert("hello")})),e})();document.body.append(e)})();
<!-- html中引入main.js -->
<!-- 由于打包过程会把import和export转换,所以不再需要type='module'了 -->
<script src="dist/main.js"></script>
查看页面效果是正常的,说明打包成功将ES Module语法转换了。
三、webpack配置文件
webpack 4以后的版本,支持零配置打包,整个打包过程会按照约定,将src/index.js作为打包的入口,最终打包的结果会放到dist目录下的main.js文件中。但是一般的话,我们都是需要自定义路径的,那我们就可以在webpack.config.js中配置。
在根目录下新建一个webpack.config.js文件,这是一个运行在node环境下的js文件,也就是说我们需要按照CommonJS的规范去编写代码。
// webpack.config.js
const path = require("path")
module.exports = {
entry:"./src/index.js", // 指定打包入口文件的路径,注意,如果这里的路径是相对路径, ./是不能省略的
output:{ // 通过output属性设置输出文件位置,output的值要求是一个对象
filename:"bundle.js", // 通过filename指定输出文件名称
path:path.join(__dirname, "output") // 通过path属性指定输出文件的目录,需要输入一个绝对路径
}
}
配置完后,再执行yarn build
,就能以src/index.js作为入口文件,打包一个bundle.js文件生成到项目根目录下的output目录下。
四、webpack工作模式
webpack4新增了一个工作模式的用法,这个用法大大简化了webpack的复杂程度,我们可以将其理解成不同环境的几组预设配置。
webpack打包的工作模式默认是production,此模式下会自动启动一些优化插件,例如自动对我们的代码进行压缩,这对我们的实际生产环境是很友好的,但是打包的结果我们没办法去阅读,我们可以通过cli参数去指定打包模式。
yarn build --mode development
development模式下webpack会自动优化打包速度,并且去添加一些调试当中需要的辅助到我们代码当中。
yarn build --mode none
none模式下webpack就是运行最原始的打包,不会对代码进行任何额外的处理。
除了在cli参数指定工作模式,我们还可以在配置文件中设置。
// webpack.config.js
module.exports = {
mode:"development"
}
这样webpack就会根据我们配置的工作模式去工作了。
五、webpack资源模块加载
main.css内容:
body{
margin: 0 atuo;
background-color: pink;
font-size: 20px;
padding: 0 20px;
width: 100%;
height: 100%;
}
我们通过webpack.config.js配置文件设置打包入口文件为main.css,尝试打包转换css文件。
const path = require("path")
module.exports = {
mode:"production",
entry:"./src/main.css",
output:{
filename:"bundle.js" ,
path:path.join(__dirname, "dist")
}
}
yarn build
结果为:
命令行报了一个模块解析错误,错误信息大体意思就是说,在解析模块过程中,遇到了非法字符,这是因为webpack内部默认只会去处理JavaScript文件,也就是说,他会把打包过程中所遇到的所有文件都当作JavaScript去解析。
报错后其实有提示怎么解决,You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file。意思就是当前没有配置处理此文件的加载器,我们需要用适当的加载器去处理此类型文件。
这也意味这webpack可以用加载器(loader)来处理文件,他内部的loader只能处理js文件,我们可以再去为其他类型的文件添加不同的loader,这里需要一个css-loader,我们通过yarn去安装。
yarn add css-loader --dev
webpack.config.js
module.exports = {
mode:"none",
entry:"./src/main.css",
output:{
filename:"bundle.js",
path:path.join(__dirname, "dist")
},
module:{
rules:[// 这个数组就是我们针对于其他资源模块加载资源的配置
{
test:/.css$/, // test值是一个正则表达式,用于匹配打包过程中遇到的文件路径
use:"css-loader" // 指定匹配到的文件所用到的loader
}
]
}
}
yarn build
成功打包,通过serve .
启动服务,发现页面上并没有实现我们的css效果。这是因为css-loader只是将整个css文件转换成js模块,并没有去引用,所以我们还需要一个style-loader去帮我们引用。
yarn add style-loader --dev
// webpack.config.js
module.exports = {
......,
module:{
rules:[// 这个数组就是我们针对于其他资源模块加载资源的配置
{
test:/.css$/, // test值是一个正则表达式,用于匹配打包过程中遇到的文件路径
use:[ // 指定匹配到的文件所用到的loader,如果是数组的话,从后往前执行,例如这里先执行css-loader,再执行style-loader
"style-loader", // style-loader的作用是把css-loader转换后的结果以style标签的形式追加到页面上
"css-loader" // css-loader的作用就是将整个css文件转换成js模块,
]
}
]
}
}
这样我们打包后运行到浏览器中,就能实现css效果了。至此,我们也就实现了把css作为打包文件入口进行打包了。
六、webpack导入资源模块
实际上,我们一般还是以Javascript作为打包入口,因为打包入口从某种程度上说可以算是应用的运行入口,而就目前而言,前端应用当中的业务是由JavaScript去驱动的,所以正确的做法还是以JavaScript作为打包入口,然后在JavaScript中通过import去引入css文件,这样的话css-loader仍然可以正常工作。
我们将webpack.config.js中的入口文件修改会index.js,然后在index.js中引入main.css。
import "./main.css" // 因为我们只是需要去执行这个文件,所以采用这种导入方式
执行yarn build
,再执行serve .
,打开页面,页面效果正常。
webpack不仅建议我们在js中引入css,而是建议我们在编写代码过程中引入任何当前代码需要的文件,因为真正需要资源的不是应用,而是代码,是代码想要正常工作,就必须要加载对应资源。
js代码本身是负责完成整个应用的业务功能,放大来看就是驱动了整个前端应用,而在实现业务功能的过程中,可能用到样式或图片等一系列的资源文件,如果建立了这种依赖关系,一来逻辑合理,js确实需要这些资源文件;二来保证上线时资源不缺失,每一个上线的文件都是必要的。