Webpack入门配置总结
前言
我的配置版本号如下:
1 |
|
参考文档:webpack官方文档 , 在配置每一部分时候我会把链接发在里面
package.json中配置build
1 |
|
初始化 webpack.config.js
模式的区别:
1 |
|
1 |
|
入口文件和出口文件配置:
1 |
|
webpack插件自动生成HTML:
webpack文档链接 :https://webpack.js.org/plugins/html-webpack-plugin/ 和 https://github.com/jantimon/html-webpack-plugin#options
这样就会在 dist文件中生成一个 index.html
1 |
|
1 |
|
配置内容:
1 |
|
webpack引入CSS:
方法一: 用JS来生成style
webpack文档链接: https://webpack.docschina.org/loaders/css-loader/#getting-started
先安装依赖插件, 必须要安装style-loader 。
1 |
|
原理是 webpack默认要把 以.css结尾的放到style标签中。
1 |
|
方法二: 把CSS抽成文件
先安装依赖,
1 |
|
配置
1 |
|
webpack dev-server 的使用
webpack dev-server文档链接:https://www.webpackjs.com/guides/development/
安装插件
1
npm install --save-dev webpack-dev-server
webpack.config.js 配置
1
2
3devServer: {
contentBase: './dist'
},在package.json 配置以下 start
1
"start": "webpack-dev-server --open",
在 npm start 的时候发现 报错, 报错原因是:Error: Cannot find module ‘webpack-cli/bin/config-yargs’
解决方法是:把版本号改一下 如下:
1
2
3"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"不同模式使用不同的 webpack config
我们已经知道模式有 开发者模式(development) 和 生产模式(production) ,那么我们应该在不同模式中选用不同的插件来使用。
比如: 在生产模式production中,引入CSS方法使用style, 因为这样不同生成一个CSS文件,使得效率变高。如果是开发者模式 ,那么我们就需要把CSS抽成文件。
创建一个webpack配置文件:webpack.config.prod.js 用在生产模式时使用。
创建一个webpack配置文件: webpack.config.base.js 用于开发和生产模式的共同属性
并在package.json文件中重新配置build。
1
"build": "rm -rf dist && webpack --config webpack.config.prod.js"
webpack loader 和 webpack plugin 的区别
loader (加载器) : 用于加载某些文件,比如加载JS文件,可以把JS转换为低版本支持的js, 又比如CSS,使用相应的loder加载,可以把CSS放到页面上style标签中或者其他处理。也可以用来加载图片,可以对图片进行优化。
plugin (插件): 扩展webpack功能的,比如使用 HtmlWebpackPlugin 插件用来生成html文件, 使用 miniCssExtractPlugin 插件用来生成CSS文件等。
引入 sass
这里使用 datr-sass 不使用node-sass(已过时)
1
npm install sass-loader dart-sass --save-dev
webpakc.config配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14rules: [{
test: /\.scss$/i,
use: [
"style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
// `dart-sass` 是首选
implementation: require("dart-sass"),
},
},
],
}, ],把css文件改为scss文件即可使用。
引入less
安装loader
1
npm install less less-loader --save-dev
1
2
3
4{
test: /\.less$/,
loader: ["style-loader","css-loader","less-loader"], // compiles Less to CSS
},stylus 和 引入less 方法一致,不再写了。
使用 file-loader 引入图片
安装
1
npm install file-loader --save-dev
我的版本号:
1
"file-loader": "^5.0.2",
webpack.config配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
};然后在html页面中引入就可以了。
webpack impor() 懒加载
不多说看代码
inedx.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14// index.js
const btn = document.createElement('button')
btn.innerText = '懒加载'
btn.onclick = ()=>{
const promise = import('./lazy.js')
promise.then((module)=>{
const fn = module.default
fn()
},()=>{
console.log('懒加载模块加载失败')
})
}
div.appendChild(btn)lazy.js
1
2
3export default function lazy() {
console.log('我是懒加载陌客')
}上面就是如何使用 import() 来实现懒加载
用 import() 去加载文件 ,然后得到一个 promise , 在成功之后 使用 module.default() 调用 lazy.js 文件