前端工程化与webpack
前端工程化主要解决的问题:
- JavaScript、css 代码的合并与压缩
- CSS 预处理:Less、Sass、Stylus 的编译
- 生成雪碧图
- ES6 -> ES5
- 模块化等
webpack 的主要使用场景是单页面富应用(SPA)
,将一些诸如:typescript、less、jpg、vue等格式的文件通过特定的加载器(Loader)
编译后,最终统一生成 .js、.css、.png等静态资源文件。
如何文件都可称为是一个模块。webpack就是处理模块间的依赖关系,并把他们进行打包。
webpack 基础配置
安装 webpack 与 webpack-dev-server
初始化
1 | npm init |
本地局部安装 webpack:(书中是v2,我的需要下载脚手架 -cli)
1 | npm install webpack --save-dev |
安装 webpack-dev-server
,可以启动一个服务器、热更新、接口代理等
1 | npm install webpack-dev-server --save-dev |
最终的 package.json 文件内容如下:
1 | { |
就是一个 js 文件而已
创建 webpack.config.js
,并初始化:
1 | var config = { |
接着,在 package.json 里配置启动项:
1 | "scripts": { |
webpack 的入口(Entry)和出口(Output),重中之重,新建 main.js
,并在 webpack.config.js
中进行入口和输出的配置:
1 | var config = { |
然后:npm run dev
,浏览器会自动打开页面了。
逐步完善配置文件
webpack 对于不同的模块需要不同的加载器来处理,通过安装不同的加载器,就可以对各种后缀名的文件进行处理。
如处理 .css 文件:
1 | # css |
在实际的业务中,需要使用插件 extract-text-webpack-plugin
把各处的css文件提取出来。,并生成一个 main.css 文件,最终在 index.html 里加载它。
1 | npm install extract-text-webpack-plugin@next --save-dev |
config
1 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); |
单文件组件与 vue-loader
安装加载器:
1 | npm install --save-dev vue vue-loader vue-style-loader |
结合自己配置的过程中关于版本冲突的解决办法
主要修改:
index.js(之前的
main.js
,目录也放在了/src/
下)1
2
3
4
5
6
7import Vue from 'vue';
import App from './App.vue';
const root = document.createElement('div');
document.body.appendChild(root);
new Vue({
render: h => h(App)
}).$mount(root);App.vue
1 | <template> |
- package.js
1 | "scripts": { |
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
44const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, './dist'), // 输出目录
publicPath: '/dist', //指定资源文件引用的目录
filename: 'main.js' // 指定输出文件的名称
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader'
})
}
]
},
plugins: [
new VueLoaderPlugin(),
new ExtractTextPlugin('main.css'),
]
}.babelrc
1
2
3
4{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}index.html
1
2
3
4
5
6...
<link rel="stylesheet" href="./dist/main.css">
...
<body>
<script src="./dist/main.js"></script>
</body>