Webpack安装&使用
安装
npm install webpack webpack-cli -D
使用方式
方式一
./node_modules/.bin/webpack --version
方式二
npx webpack --version
入口(entry)
**入口起点(entry point)**指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
出口(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为
./dist
const config = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, './dist')
}
}
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
让webpack处理CSS文件
webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这种情况下,以
.css
结尾的全部文件,都将被提供给style-loader
和css-loader
。
-
引入对应loader
npm install --save-dev css-loader npm install --save-dev style-loader
-
编写规则,匹配哪些后缀使用哪些
loader
webpack.config.js
module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] } ] }
-
loader
链式传递,先从后面的loader开始
让webpack处理scss文件
-
引入对应loader
npm install sass-loader node-sass -D
-
编写规则
module:{ rules:[ { test:/\.(scss|sass)$/, use:['style-loader','css-loader','sass-loader'] } ] },
file-loader 和 url-loader 可以接收并加载任何文件,然后将其输出到构建目录。
让webpack处理图片
-
引入对应loader
npm install file-loader -D
-
编写规则
{ test: /\.(png|jpg|svg|gif)$/, use:['file-loader'] }
-
可以在
index.js
中引入import Icon from './icon.jpg'; //将图像添加到我们现有的div const myIcon = new Image(); myIcon.src = Icon; element.appendChild(myIcon);
-
也可在
index.scss
中引入.hello{ color: red; background: url("./icon.jpg"); }
让webpack处理字体
-
引入对应
loader
npm install file-loader -D
-
编写规则
{ test:/\.(woff|woff2|eot|ttf|otf)$/, use:['file-loader'] }
-
在
index.scss
中引入@font-face { font-family: 'Myfont'; src: url("./myfont.TTF") format('ttf'); font-weight: 600; font-style: normal; } .hello{ color: red; font-family: Myfont; }
让webpack处理CSV
、TSV
、XML
-
引入对应
loader
npm install csv-loader xml-loader -D
-
编写规则
{ test:/\.(csv|tsv)$/, use:['csv-loader'] }, { test:/\.xml$/, use:['xml-loader'] }
-
在
src
下创建data.xml
并在index.js
中引入data.xml
<?xml version="1.0" encoding="UTF-8" ?> <note> <to>mary</to> <from>john</from> <heading>reminder</heading> <body>call cindy on tuesday</body> </note>
index.js
import Data from './data.xml'; console.log(Data);
插件(plugins)
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
使用plugins处理html
-
引入对应plugins
npm install html-webpack-plugin -D
-
由于插件可以携带参数/选项,所以必须在webpack配置中,向
plugins
属性传入new
实例 -
//处理src下的html文件 plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}) ],
模式(mode)
通过选择
development
或production
之中的一个,来设置mode
参数,你可以启用相应模式下的 webpack 内置的优化
module.exports = {
mode: 'production'
};
模块热替换
过程
在应用程序中置换模块
- 应用程序代码要求HMR runtime检查更新
- HMR runtime(异步)下载更新,然后通知应用程序代码
- 应用程序代码要求HMR runtime应用更新
- HMR runtime(同步)应用更新
在编译器中
除了普通资源,编译器需要发出update
,以允许更新之前的版本到新的版本,update
由两部分组成:
- 更新后的
manifest
(JSON) - 一个或多个更新后的
chunk
(JavaScript)