🌎 Web | WebPack 配置过程(Vue、Babel、Sass)

打算重构 XMoj 的前端,使用新的架构,记录下配置过程,以便以后查询,如果你也想用这个架构,那么这篇文章将带你一步一步安装和配置各种环境,一步步地了解各种组件的基本使用方式,最后搭成一个多组件的网页应用。如果你想快速搭建,那么可以直接看文章底部。

安装

首先我们先新建一个工程的文件夹,并且用 npm 初始化

1
2
3
4
5
6
//全局安装
npm install -g webpack
//初始化项目
npm init
//安装到你的项目目录
npm install --save-dev webpack

基本项目结构

1
2
3
4
5
6
7
8
9
10
11
Project
node_modules
...
app
test.js
main.js
public
index.html
index.js
package.json
webpack.config.js

一个简单的例子

1
2
3
//main.js
const greeter = require('./test.js')
document.querySelector('#root').appendChild(greeter())
1
2
3
4
5
6
// test.js
module.exports = function() {
var greet = document.createElement('div')
greet.textContent = 'Hi there and greetings!'
return greet
}
1
2
3
4
5
6
7
8
9
10
11
12
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Webpack Sample Project</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>

开始使用 Webpack

直接命令行调用

1
webpack app/main.js public/bundle.js

通过 Webpack 配置调用

1
2
3
4
5
6
7
8
// webpack.config.js
module.exports = {
entry: __dirname + '/app/main.js', //已多次提及的唯一入口文件
output: {
path: __dirname + '/public', //打包后的文件存放的地方
filename: 'bundle.js' //打包后输出文件的文件名
}
}
1
webpack

通过项目配置调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// package.json
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"start": "webpack" // 修改的是这里,JSON文件不支持注释,引用时请清除
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"webpack": "^1.12.9"
}
}
1
npm start

生成 Source Maps

devtool 选项配置结果
source-map在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度;
cheap-module-source-map在一个单独的文件中生成一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便;
eval-source-map使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的 JS 文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定不要启用这个选项;
cheap-module-eval-source-map这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点
1
2
3
4
5
6
7
8
9
// webpack.config.js
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + '/app/main.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
}
}

使用 webpack 构建本地服务器

1
npm install --save-dev webpack-dev-server
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// webpack.config.js
module.exports = {
devtool: 'eval-source-map', //source-map cheap-module-source-map eval-source-map cheap-module-eval-source-map
entry: __dirname + '/app/main.js', //唯一入口文件
output: {
path: __dirname + '/public', //打包后的文件存放的地方
filename: 'bundle.js' //打包后输出文件的文件名
},
devServer: {
contentBase: './public', //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true, //实时刷新
port: 8080
}
}
1
2
3
4
5
6
// package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},

Babel 模块安装

1
2
// npm一次性安装多个依赖模块,模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
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
// webpack.config.js
module.exports = {
entry: __dirname + '/app/main.js', //已多次提及的唯一入口文件
output: {
path: __dirname + '/public', //打包后的文件存放的地方
filename: 'bundle.js' //打包后输出文件的文件名
},
devtool: 'eval-source-map',
devServer: {
contentBase: './public', //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: 'babel-loader'
},
exclude: /node_modules/
}
]
}
}

配置文件放项目根目录下

1
2
3
4
//.babelrc
{
"presets": ["react", "es2015"]
}

Vue 模块安装

安装

1
2
3
4
5
6
// 安装vue
npm install --save vue
// 解析vue组件
npm install --save-dev vue-loader vue-template-compiler
// 解析CSS
npm install --save-dev css-loader file-loader

一个简单的例子

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
<!-- ./src/App.vue -->
<template>
<div id="example">
<h1>{{ msg }}</h1>
<ul>
<li v-for="n in 5">{{ n }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
msg: 'Hello World!'
}
}
}
</script>

<style scoped>
#example {
background: red;
height: 100vh;
}
</style>
1
2
3
4
5
6
7
8
9
10
// ./src/main.js
/* 引入vue和主页 */
import Vue from 'vue'
import App from './App.vue'

/* 实例化一个vue */
new Vue({
el: '#app',
render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- ./index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
/>
<title>vue-webpack</title>
</head>
<body>
<section id="app"></section>
<script src="./dist/build.js"></script>
</body>
</html>
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
// webpack.config.js
let path = require('path')
module.exports = {
devtool: 'eval-source-map', //source-map cheap-module-source-map eval-source-map cheap-module-eval-source-map
entry: './src/main.js',
output: {
/* 输出目录,没有则新建 */
path: path.resolve(__dirname, './dist'),
/* 静态目录,可以直接从这里取文件 */
publicPath: '/dist/',
/* 文件名 */
filename: 'build.js'
},
devServer: {
contentBase: './public', //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true, //实时刷新
port: 8080
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}

Sass 模块安装

1
2
3
4
5
6
//在项目下,运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass,所以还要安装node-sass
npm install --save-dev node-sass
//使用样式的话,css-loader和style-loader也是必须的依赖包
npm install --save-dev css-loader style-loader
  • css-loader 使你能够使用类似@import 和 url(…)的方法实现 require()的功能;
  • style-loader 将所有的计算后的样式加入页面中;

二者组合在一起使你能够把样式表嵌入 webpack 打包后的 JS 文件中。

配置

1
2
3
4
5
// webpack.config.js
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}

sass 的使用如下,例如:

  • 引入外部样式,下面两种写法都可以使用:
1
2
import '../../css/test.scss'
require('../../css/test2.scss');
  • 在.vue 文件中使用
1
2
3
<style lang="sass">
//sass语法样式
</style>

Vue 组件使用

到了这里,我们就要使用 Vue 的组件、Babel、Sass 了,通过配置 webpack,直接生成 html

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
// webpack.config.js
let path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
devtool: 'eval-source-map', //source-map cheap-module-source-map eval-source-map cheap-module-eval-source-map
entry: './src/main.js',
output: {
/* 输出目录,没有则新建 */
path: path.resolve(__dirname, './dist'),
/* 静态目录,可以直接从这里取文件 */
publicPath: '',
/* 文件名 */
filename: '[name].js'
},
devServer: {
contentBase: './public', //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true, //实时刷新
port: 8080
},
resolve: {
// 这个很重要,需要把vue设置为独立构建,不然无法进行
alias: {
vue: 'vue/dist/vue.js'
}
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, './index.html'),
inject: true
})
]
}
1
2
3
4
5
6
7
8
9
10
11
// src/main.js
/* 引入vue和主页 */
import Vue from 'vue'
import App from './App.vue'
Vue.config.debug = true //开启错误提示
/* 实例化一个vue */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
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
<!-- src/App.vue -->
<template>
<div id="example">
<h1>{{ msg }}</h1>
<ul>
<li v-for="n in 5" :key="n">{{ n }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
msg: 'Hello World!'
}
}
}
</script>

<style lang="scss">
#example {
background: wheat;
height: 100%;
width: 100%;
position: fixed;
}
</style>

Vue 组件路由使用

接下来,我们的需求就是要使用路由显示多个页面。

。。。

然而在我手动搭好整个项目的时候,发现这些东西都可以由 vue-cli 一键生成,这就非常地绝望了。

所以下面讲一下如何使用 vue-cli 搭建项目

Vue-cli 的使用

安装

1
2
3
4
5
6
7
// 全局安装
npm install -g vue-cli
// 初始化项目
vue init webpack projectName
// 安装依赖
cd projectName
npm install

然后我们的项目就搭好了

1
2
// 建立静态文件
npm run build

然后配置一下 Sass 就可以直接使用了

参考网页

入门Webpack,看这篇就够了 - 简书

详解用 webpack2.0 构建 vue2.0 超详细精简版

webpack配置sass模块的加载 - 浅岸 - 博客园

webpack 打包 vue2.0 项目时必现问题。

vue-cli 构建 vue 项目

vue-cli webpack 配置分析

土豪通道
0%