webpack打包工具入门

简介

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用

快速入门

这里已经介绍得非常详细了,我就不再废话。

在vue项目中使用

如果在已经成型的vue项目中,package.json构建时使用vue-cli-service build,那么我们重新使用webpack打包会有一些坑。(我在试图进行vue ssr时碰到了这个问题)

vue-style-loader不要忘记

在一些教程文章上对vue文件的rules只有vue-loader, 如果vue文件中嵌入了<style>标签,就会报错。

修改vue的rules如下:

1
2
3
4
{
test: /\.vue$/,
loader: 'vue-loader!vue-style-loader',
}

.js文件要用babel

1
2
3
4
5
6
7
8
9
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(projectRoot, 'src'),
exclude: /node_modules/,
options: {
presets: ['@vue/babel-preset-app']
}
}

样式文件各不相同

1
2
3
4
5
6
7
8
9
10
11
12
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
}

其他如图片文件、字体文件配置见完整的配置文件。

一个完整的webpack.config.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
const path = require('path');
const projectRoot = path.resolve(__dirname, '.');
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
// 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
target: 'node',
mode:'production',
entry: path.join(projectRoot, 'src/entry-server.js'),
output: {
libraryTarget: 'commonjs2',
path: path.join(projectRoot, 'dist'),
filename: 'bundle.server.js',
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader!vue-style-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(projectRoot, 'src'),
exclude: /node_modules/,
options: {
presets: ['@vue/babel-preset-app']
}
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
},
/*{
test: /\.styl$/,
loader: 'style-loader!css-loader!stylus-loader'
},
*/
{
test: /\.(jpg|png)$/,
loader: 'url-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)\w*/,
loader: 'url-loader'
},
]
},
plugins: [
new VueLoaderPlugin()
],
resolve: {
extensions: ['.js', '.json', '.css', '.scss','.vue'],//添加在此的后缀所对应的文件可以省略后缀
alias: {
'vue$': 'vue/dist/vue.runtime.esm.js',
'@': path.resolve(path.join(projectRoot, 'src')),
},
modules: [
path.resolve(path.join(projectRoot, 'node_modules')),
path.resolve(path.join(projectRoot, 'src'))
],
}
}

一些其他问题

  • import 路径问题
    1
    import api from 'API/index'

vs

1
import api from 'api/index'

api是本地的一个路径,要么用./api引入,要么用API引入

  • import的命名问题
    1
    import api from 'API/index'

这里的api是说,将API/index导出的所有东西作为apiattributes,可以直接通过api.blabla调用
vs

1
import {api} from 'API/index'

这里的api是值从API/index中引入api, 如果在源文件中没有定义,那么为undefined.

参考:
webpack中文文档 ,讲解详细

0%