Webpack安装和使用
安装
1 | npm install -g webpack |
打包JS
1 | webpack <js入口文件> -o <js输出文件> |
举例:
- bar.js
1
2
3module.exports = function () {
console.log('i am bar...')
} - main.js
1
2var bar = require('./bar')
bar()1
webpack main.js -o bundle.js
webpack.conf.js
通过配置文件简化打包,再次打包时只用输入webpack
1 | // path模块 |
卸载webpack
1
2
3# 官方建议局部安装,因为当项目迁移都其他服务器内,如果依赖全局安装,可能导致不兼容
npm uninstall -g webpack
npm uninstall -g webpack-cli局部安装
1
2npm i -D webpack
npm i -D webpack-cli自定义局部命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23cd /path/projeth
cat package.js
{
"name": "webpack-demo02",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"show":"webpack -v", # 这里指定命令
"build":"webpack", # 构建
"watch":"webpack --watch"# webpack 实时监测模式
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
}
# 调用方法
npm run buildCSS打包
- 安装转换器
1
npm i -D style-loader css-loader
- 配置webpack规则style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28// path模块
const path = require('path')
module.exports = {
// 只能是none,development,production
// none,输出文件不压缩
// development,开发环境,输出文件不压缩
// production,生产环境, 输出文件压缩
mode:'none',
// 入口js
entry:'./src/main.js',
// 输出js位置
output:{
path:path.join(__dirname, './dist/'),
filename:'bundle.js'
},
module:{
rules:[// 配置转规则
{
test: /\.css$/,//正则表达式,匹配css文件,注意不能有单引号
use:[// 根据外国人的习惯顺序
'style-loader',//js识别css
'css-loader'//css转换js
]
}
]
}
}main.js1
2
3body{
background: yellow;
}1
import './style.css'
- 打包命令
1
npm run build
- 安装转换器
图片打包
- 安装file-loader
1
npm i -D file-loader
- 配置webpack规则style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32// path模块
const path = require('path')
module.exports = {
// 只能是none,development,production
// none,输出文件不压缩
// development,开发环境,输出文件不压缩
// production,生产环境, 输出文件压缩
mode:'none',
// 入口js
entry:'./src/main.js',
// 输出js位置
output:{
path:path.join(__dirname, './dist/'),
filename:'bundle.js'
},
module:{
rules:[// 配置转规则
{
test: /\.css$/,//正则表达式,匹配css文件,注意不能有单引号
use:[// 根据外国人的习惯顺序
'style-loader',//js识别css
'css-loader'//css转换js
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}
]
}
}main.js1
2
3
4body{
background: yellow;
background-image: url("Grafana.png");
}1
import './style.css'
- 配置webpack规则
- 打包命令
1
2
3
4npm run build
# 因为文件打包之后只有相对路径,所有需要将index移动到和dist目录下
cp index.html dist/
`
- 安装file-loader
html-webpack-plugin
1
npm install --save-dev html-webpack-plugin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42webpack.config.js
// path模块
const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 只能是none,development,production
// none,输出文件不压缩
// development,开发环境,输出文件不压缩
// production,生产环境, 输出文件压缩
mode:'none',
// 入口js
entry:'./src/main.js',
// 输出js位置
output:{
path:path.join(__dirname, './dist/'),
filename:'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
// 指定要打包的模板页
// 就会即将index.html打包到与dist.js相同的目录
template: './index.html'
})
],
module:{
rules:[// 配置转规则
{
test: /\.css$/,//正则表达式,匹配css文件,注意不能有单引号
use:[// 根据外国人的习惯顺序
'style-loader',//js识别css
'css-loader'//css转换js
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}
]
}
}
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com
文章标题:Webpack安装和使用
文章字数:876
本文作者:Aaron
发布时间:2020-01-18, 19:34:08
最后更新:2020-04-14, 23:37:35
原始链接:http://blog.linuxerbulo.com/2020/01/18/Webpack%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。