简单搭建基于webpack环境下的Vue项目，在此过程中熟悉webpack以及vue的简单用法，按照步骤一步一步进行，从依赖包安装到webpack配置到vue单文件组件的引用到最后打包发布。
第一步：安装webpack
首先自行选择路径创建项目
并新建一个文件夹 webpack-vue
全局安装webpack，安装之前先检查全局是否已经安装并且确定版本
如果没有安装请自行安装，命令如下：
yarn add webpack webpack-cli -g
检查版本命令为：
F:\vue-learns\webpack-vue>webpack -v
4.23.0
F:\vue-learns\webpack-vue>webpack-cli -v
3.1.2
第二步：项目初始化
进入项目目录：
cd vue-learns
cd webpack-vue
yarn init -y
//新建package.json
//和npm功能类似，如果还没安装yarn，网上有大量教程在此不赘述
安装vue webpack webpack-dev-server
yarn add vue （--save可省略）
yarn add webpack webpack-dev-server --dev
//--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。
//--dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
在项目根目录下新建index.html
Document
在项目根目录下新建webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {};
新建src文件夹目录，并且在src下新建main.js
webpack的思想就是一切皆模块，官方推荐使用commonJS规范，这使得我们浏览器端也可以使用commonJS的模块化写法 :module.exports = {}
src目录下新建一个utils.js
module.exports = function say() {
console.log('hello world');
}
main.js :
var say = require('./utils');
say();
webpack.config.js:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
output: {
path: path.resolve(__dirname, './dist'), // 项目的打包文件路径
publicPath: '/dist/', // 通过devServer访问路径
filename: 'build.js' // 打包后的文件名
},
devServer: {
historyApiFallback: true, //historyApiFallback设置为true那么所有的路径都执行index.html。
overlay: true // 将错误显示在html之上
}
};
webpack4.0 可能会运行报错，需要重新安装 yarn add -D webpack-cli
yarn run dev
可以发现浏览器自动打开一个http://localhost:8080/ 的页面 F12打开控制台可以看到有hello world打出
随意修改utils.js，可以发现浏览器会自动刷新
如果我们希望看打包后的bundle.js文件，运行
yarn run build
第三步：引入vue
main.js:
import Vue from 'vue';
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
index.html:
Document
{{message}}
webpack.config.js :
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
devServer: {
historyApiFallback: true,
overlay: true
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
重新运行npm run dev，可以看到，清一下缓存（ctrl+shift+delete），页面正常显示了'Hello Vue!'
第四步：引入scss和css
webpack默认只支持js的模块化，如果需要把其他文件也当成模块引入，就需要相对应的loader解析器
yarn add node-sass css-loader vue-style-loader sass-loader --dev
webpack.config.js:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
devServer: {
historyApiFallback: true,
overlay: true
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
rules: [
{ //匹配后缀名为css的文件,然后分别用css-loader，vue-style-loader去解析
//解析器的执行顺序是从下往上(先css-loader再vue-style-loader)
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
}
]
}
};
因为我们这里用vue开发，所以使用vue-style-loader，其他情况使用style-loader
css-loader使得我们可以用模块化的写法引入css,vue-style-loader会将引入的css插入到html页面里的style标签里
我们现在在src目录下新建style目录，style目录里新建common.scss
common.scss:
body {
background: #fed;
}
main.js:
import './style/common.scss';
第五步 ： 使用babel转码
ES6的语法大多数浏览器依旧不支持,bable可以把ES6转码成ES5语法，这样我们就可以大胆的在项目中使用最新特性了
yarn add babel-core babel-loader babel-preset-env babel-preset-stage-3 --dev
在项目根目录新建一个.babelrc文件
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
webpack.config.js添加一个loader
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
//exclude表示忽略node_modules文件夹下的文件，不用转码
现在我们来试下async await语法吧
utils.js
export default function getData() {
return new Promise((resolve, reject) => {
resolve('ok');
})
}
main.js
import getData from './utils';
import Vue from 'vue';
import './style/common.scss';
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
async fetchData() {
const data = await getData();
this.message = data;
}
},
created() {
this.fetchData();
}
});
第六步 ： 引入图片资源
把图片也当成模块引入
yarn add file-loader --dev
webpack.config.js添加一个loader
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
在src目录下新建一个img目录，存放一张图片logo.png
main.js:
import getData from './utils';
import Vue from 'vue';
import './style/common.scss';
Vue.component('my-component', {
template: '![]()
',
data() {
return {
url: require('./img/logo.png')
}
}
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue !'
},
methods: {
async fetchData() {
const data = await getData();
this.message = data;
}
},
created() {
this.fetchData()
}
});
index.html:
Document
{{message}}
第七步：单文件组件
在前面的例子里，我们使用 Vue.component 来定义全局组件
在实际项目里，更推荐使用单文件组件
yarn add vue-loader vue-template-compiler --dev
添加一个loader:
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
}
在src目录下新建一个App.vue
{{ msg }}
main.js:
import Vue from 'vue';
import App from './App.vue';
import './style/common.scss';
new Vue({
el: '#app',
template: 'index.html:
Document
最后，打包发布
run build
在package.json中的script中 进行压缩
var path = require('path');
var webpack = require('webpack');
module.exports = {
// 省略...
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
至此，一个简单的vue开发环境搭建完成。
搭建基于webpack4.0的vue项目，这篇文章就够了
从零开始搭建一个简单的基于webpack的vue开发环境