webpack-yarn环境搭建
# 1. 初始化项目
1). 生成package.json
yarn init -y
2). 创建入口js: src/index.js
console.log('Hello Webpack!')
document.getElementById('root').innerHTML = '<h1>Hello222</h1>'
3). 创建页面文件: index.html
<div id="root"></div>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 2. webpack基本使用
1). 下载依赖包
yarn add -D webpack webpack-cli //下载webpack和webpack命令行工具
yarn add -D html-webpack-plugin //下载打包html模版页面的包
//yarn remove //卸载
2). 创建webpack配置: webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') //引入html包
module.exports = {
// 模式: 生产环境
//mode: 'production',
// 入口
entry: {
app: path.resolve(__dirname, 'src/index.js')
},
// 出口(打包生成js)
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist')
},
// 模块加载器
module: {
rules: [
]
},
// 插件
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', //指定模版页面
filename: 'index.html' //打包后的页面名
})
]
}
3). 生成环境打包并运行
配置打包命令: "scripts": {
"build": "webpack --mode production"
},
打包项目: yarn build
//运行打包项目: serve dist
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
42
43
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
42
43
# 3. 开发环境运行
1). 现在的问题:
每次修改项目代码后, 必须重新打包, 重新运行
//自动打包
2). 下载依赖包(版本不匹配的问题)
yarn add -D webpack-dev-server
//以下版本匹配
//yarn add -D webpack-dev-server@3.9.0
//yarn add -D webpack@4.41.2 webpack-cli@3.3.10
3). 配置开发服务器
devServer: {
open: true, // 自动打开浏览器
quiet: true, // 不做太多日志输出
},
4). 配置开启source-map调试
devtool: 'cheap-module-eval-source-map',
5). 开发环境运行
配置命令: "dev": "webpack-dev-server --mode development"
执行命令: yarn dev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 4. 打包处理 ES6/CSS/图片
1). 处理ES6
a. 下载依赖包
yarn add -D babel-loader @babel/core @babel/preset-env
b. 配置
{
test: /\.js$/,
//exclude: /(node_modules|bower_components)/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
2). 处理CSS
a. 下载依赖包
yarn add -D css-loader style-loader
b. 配置
{
test: /\.css$/,
use: ['style-loader', 'css-loader'], // 多个loader从右到左处理
}
3). 处理图片
a. 下载依赖包
yarn add -D url-loader@2.3.0 file-loader@4.3.0
b. 配置
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 1000,
name: 'static/img/[name].[hash:7].[ext]' // 相对于output.path
}
}
4). 测试
a. 添加图片: src/assets/imgs/logo.png
b. 添加css: src/assets/css/my.css
img {
width: 200px;
height: 200px;
}
c. index.js
import logo from './assets/imgs/logo.png'
import './assets/css/my.css'
const image = new Image()
image.src = logo
document.body.appendChild(image)
document.getElementById('root').innerHTML = '<h1>Hello222</h1>'
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
42
43
44
45
46
47
48
49
50
51
52
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
42
43
44
45
46
47
48
49
50
51
52
# 5. 搭建vue的环境
0). 文档:
https://vue-loader.vuejs.org/zh/
1). 下载依赖包:
yarn add vue
yarn add -D vue-loader vue-template-compiler
2). 配置
const VueLoaderPlugin = require('vue-loader/lib/plugin')
{
test: /\.vue$/,
include: path.resolve(__dirname, 'src'),
loader: 'vue-loader'
}
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader'],
}
new VueLoaderPlugin()
// 引入模块的解析，和核心模块同级
resolve: {
extensions: ['.js', '.vue', '.json'], // 可以省略的后缀名
alias: { // 路径别名(简写方式)
'vue$': 'vue/dist/vue.esm.js', // 表示精准匹配
}
}
3). 编码:
src/App.vue
src/index.js
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
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
# 区分使用生产环境与开发环境
使用生产环境:
npm run build ==> webpack
1). 在内存中进行编译打包, 生成内存中的打包文件
2). 保存到本地(在本地生成打包文件) ===> 此时还不能通过浏览器来访问, 需要启动服务器运行
使用开发环境
npm run dev ==> webpack-dev-server
1). 在内存中进行编译打包, 生成内存中的打包文件
2). 调动服务器, 运行内存中的打包文件 ===> 可以通过浏览器虚拟路径访问
#
编辑 (opens new window)
上次更新: 2021/07/01, 20:33:02