初始化项目
mkdir vue-template && cd vue-template
npm init
安装 webpack
npm i -D webpack
npm i -D webpack-cli
ES6转ES5
npm i -D babel-loader @babel/core @babel/preset-env
在根目录创建 src文件夹，再创建main.js,并写入：
// src/main.js
let a = 4;
console.log('hello webpack ' + a);
在根目录创建webpack.config.js，并写入：
module.exports = {
mode: 'development',// 指定开发者打包模式
entry : './src/main.js',//入口文件
output : {//输出文件
filename : 'index.js',//输出文件名
path : __dirname+'/public'//输出文件路径
},
module : {
rules: [
{/*将js或者jsx文件转码成es5*/
test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件
exclude: /node_modules/,//排除这个文件夹
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
]
},
};
在package.json中加入命令：
"build": "webpack --config ./webpack.config.js",
运行：
npm run build
根目录下会生成public文件夹，并且里面有一个由 src/main.js打包出来index.js
使用 html-webpack-plugin 创建 html 页面
安装 html-webpack-plugin 插件
npm install html-webpack-plugin -D
添加入口文件
在根目录下新增 index.html，并写入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hellow diyVue</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="index.js"></script></body>
</html>
修改 webpack.config.js 配置
const path = require('path');
const HtmlWebpackplugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',// 指定开发者打包模式
entry : './src/main.js',//入口文件
output : {//输出文件
filename : 'index.js',//输出文件名
path : __dirname+'/public'//输出文件路径
},
module : {
rules: [
{/*将js或者jsx文件转码成es5*/
test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件
exclude: /node_modules/,//排除这个文件夹
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
]
},
plugins:[
new HtmlWebpackplugin({
filename: 'index.html', // 打包后的文件名，默认是index.html
template: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板
})
]
}
查看效果
运行npm run build，可以看到public文件夹生成index.html，并且还引入了 src/main.js的压缩包index.js
安装并使用 vue
安装插件及vue
npm install vue-loader vue-template-compiler cache-loader thread-loader -D
npm install vue -S
- vue-loader：用于解析
.vue文件 - vue-template-compiler：用于编译模板
- cache-loader：用户缓存loader编译的结果
- thread-loader：使用 worker 池来运行 loader，每个worker 都是一个nodejs 进程
修改webpack.config.js配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackplugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',// 指定开发者打包模式
entry : './src/main.js',//入口文件
output : {//输出文件
filename : 'index.js',//输出文件名
path : __dirname+'/public'//输出文件路径
},
module : {
rules: [
{/*将js或者jsx文件转码成es5*/
test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件
exclude: /node_modules/,//排除这个文件夹
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
use: [
{
loader: 'cache-loader'
},
{
loader: 'thread-loader'
},
{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
},
}
}
]
},
]
},
plugins:[
new HtmlWebpackplugin({
filename: 'index.html', // 打包后的文件名，默认是index.html
template: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板
}),
new VueLoaderPlugin()
]
}
使用vue
在src下新建App.vue，并写入：
<template>
<div class="App">
Hello {{msg}}
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
msg: "Vue",
};
}
};
</script>
修改 src/main.js代码：
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
打包及运行vue
运行npm run build，在浏览器打开public/index.html，即可看到浏览器显示：hello vue
安装本地服务及代码热加载
安装 webpack-dev-server
npm i -D webpack-dev-server
修改webpack.config.js配置
// ...
mode: 'development',// 指定开发者打包模式
devServer: { //node本地服务器
host: '127.0.0.1',
port: 8010
},
entry : './src/main.js',//入口文件
// ...
修改package.json
加入：
"dev": "webpack-dev-server --env.dev",
运行查看结果：
-
运行
npm run dev
在浏览器打开http://127.0.0.1:8010/
安装Vue-Router
装依赖
npm i -S vue-router
创建相关文件
page1.vue
<template>
<div>
page 1
</div>
</template>
<script>
export default {
name: "page1"
}
</script>
<style scoped>
</style>
page2.vue
<template>
<div>
page 2
</div>
</template>
<script>
export default {
name: "page2"
}
</script>
<style scoped>
</style>
在 src 下新增router/index.js文件:
import Vue from 'vue'
import VueRouter from "vue-router";
import page1 from '../page/page1.vue';
import page2 from '../page/page2.vue';
Vue.use(VueRouter);
export default new VueRouter({
mode: 'hash',
routes: [
{
path: '/page1',
component: page1
},
{
path: '/page2',
component: page2
},
{
path: '*',
redirect: '/page2'
}
]
});
修改 main.js
import Vue from 'vue'
import App from './App.vue';
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app');
修改App.vue组件
<template>
<div>
<div class="App">
Hello {{msg}}
</div>
<div>
<router-link to="/page1">go page1</router-link>
<router-link to="/page2">go page2</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
msg: "Vue",
};
}
};
</script>
运行npm run dev
配置基础组件
安装依赖
npm i -D sass-loader dart-sass css-loader style-loader file-loader url-loader postcss-loader autoprefixer
-
sass-loader，dart-sass：scss/sass将语法转为css -
css-loader：解析css文件 -
style-loader：将css解析到html页面的style上 -
postcss-loader，autoprefixer：实现自动添加css3前缀
webpack.config.js中添加：
{
test: /\.(scss|sass)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
},
{
loader: 'postcss-loader',
options: {
plugins: [
require("autoprefixer") /*自动添加前缀*/
]
}
}
]
},
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000
}
}]
}
运行及测试
src/App.vue中加入样式：
.app {
color: red;
}
自定义环境变量及常量
创建常量文件config/constant.js，并写入：
const NODE_ENV = process.env.NODE_ENV;
const config = {
production: 'http://production',
development: 'http://development',
};
module.exports = config[NODE_ENV];
修改webpack.config.js
const webpack = require('webpack');
const constant = require('./config/constant'); // 引入常量文件
// ...
plugins:[
// ...
new webpack.DefinePlugin({ // 定义全局变量
CONSTANT: JSON.stringify(constant)
})
],
修改package.json
"dev": "cross-env NODE_ENV=development webpack-dev-server",
"build": "cross-env NODE_ENV=production webpack --config ./webpack.config.js",
安装 cross-env
npm i -D cross-env
cross-env用于磨平mac 和win中的node环境之间的不同
运行
npm run dev
区分开发和生产打包
在config下创建dev和prod的webpack文件
- 公共
webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackplugin = require('html-webpack-plugin');
const webpack = require('webpack');
const constant = require('./config/constant'); // 引入常量文件
module.exports = {
entry: './src/main.js',//入口文件
output: {//输出文件
filename: 'index.js',//输出文件名
path: __dirname + '/public',//输出文件路径
// publicPath: "public", // 虚拟目录，自动指向path编译目录，放在内存中，所以在硬盘上是找不到的 默认是：/
},
module: { // 当执行require或import命令时匹配下面的加载规则
rules: [
{/*将js或者jsx文件转码成es5*/
test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件
exclude: /node_modules/,//排除这个文件夹
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{ // vue文件处理
test: /\.vue$/,
use: [
{
loader: 'cache-loader'
},
{
loader: 'thread-loader'
},
{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
},
}
},
]
},
{
test: /\.(png|jpg|gif|svg)/,
use: [{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "public/assets/", // 输出目录
limit: 8192,
}
}]
}
]
},
plugins: [
new HtmlWebpackplugin({
filename: 'index.html', // 打包后的文件名，默认是index.html
template: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板
}),
new VueLoaderPlugin(),
new webpack.DefinePlugin({ // 定义全局变量
CONSTANT: JSON.stringify(constant)
})
],
};
- 开发环境
webpack.dev.js- 不需要压缩代码
- 需要本地服务和热更新
-
css不需要提取到css文件 - sourceMap
const merge = require('webpack-merge');
const webpackConfig = require('../webpack.config')
module.exports = merge(webpackConfig, {
devtool: 'cheap-module-eval-source-map',
mode: 'development',// 指定开发者打包模式
devServer: { //node本地服务器
host: '127.0.0.1',
port: 8010
},
module: {
rules: [
{
test: /\.(scss|sass)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
},
{
loader: 'postcss-loader',
options: {
plugins: [
require("autoprefixer") /*自动添加前缀*/
]
}
}
]
},
]
},
});
- 生产环境
webpack.prod.js- 压缩代码
- 不需要本地服务和热更新
- 提取
css，压缩css - sourceMap
- 构建前清楚上一次构建的内容
const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const webpackConfig = require('../webpack.config')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssnanoPlugin = require('@intervolga/optimize-cssnano-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = merge(webpackConfig, {
mode: 'production',// 指定开发者打包模式压缩js代码
devtool: '#source-map',
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
name: 'chunk-vendors',
test: /[\\\/]node_modules[\\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
},
module: {
rules: [
{
test: /\.(scss|sass)$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
},
{
loader: 'postcss-loader',
options: {
plugins: [
require("autoprefixer") /*自动添加前缀*/
]
}
}
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
}),
new OptimizeCssnanoPlugin({
sourceMap: true,
cssnanoOptions: {
preset: [
'default',
{
mergeLonghand: false,
cssDeclarationSorter: false
}
]
}
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../public'),
to: path.resolve(__dirname, '../dist')
}
]),
new CleanWebpackPlugin(), // 用于删除上次构建的文件
]
});
安装依赖
npm i -D @intervolga/optimize-cssnano-plugin mini-css-extract-plugin clean-webpack-plugin webpack-merge copy-webpack-plugin
-
@intervolga/optimize-cssnano-plugin：用于压缩css代码 -
mini-css-extract-plugin：提取css到文件中 -
clean-webpack-plugin： 删除删词构建的文件 -
webpack-merge：合并webpack配置 -
copy-webpack-plugin：拷贝静态资源
修改package.json
"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js",
运行
npm run dev
