一、初始化项目
- 创建项目文件夹
- 初始化
- 执行命令
npm init
- 执行命令
二、安装依赖
-
安装 webpack 相关依赖
npm i webpack webpack-cli webpack-dev-server -D -
安装 vue 相关依赖
npm i vue -S; npm i vue-loader vue-style-loader vue-template-compiler vue-hot-reload-api -D-
vue：Vue.js -
vue-loader：处理 vue 文件 Vue Loader -
vue-style-loader：处理vue文件中的style vue-style-loader -
vue-template-compiler：处理vue文件中的template vue-template-compiler -
vue-hot-reload-api：Vue 组件的热重载 API vue-hot-reload-api
-
-
安装 JS ES6 新语法 处理 相关依赖
npm i babel-loader @babel/preset-env @babel/core @babel/plugin-transform-runtime @babel/preset-es2015 -D-
配置
.babelrc文件 或babel.config.js文件， 配置babel{ "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-transform-runtime"], "comments":false }
-
-
安装 样式处理 相关依赖
npm i style-loader css-loader -D -
安装 其它依赖
npm i webpack-merge -D; npm i cross-env -D; npm i html-webpack-plugin -D npm i clean-webpack-plugin -D-
webpack-merge：用来合并配置文件 -
cross-env：设置当前执行环境的插件 -
mini-css-extract-plugin：将 css 代码分离出来，方便缓存，生产环境下使用 -
clean-webpack-plugin：每次打包后清除 dist 文件
-
三、代码编写
-
根目录下创建 index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>webpack + vue</title> </head> <body> <div id="app"></div> </body> </html> 根目录下创建 src 文件夹
-
src 目录下 创建 index.js
import Vue from 'vue' import App from './app.vue' new Vue({ el: "#app", render: h => h(App) }) -
src 目录下 创建 app.vue
<template> <div> Hello,{{name}} </div> </template> <script> export default { data () { return { name: 'vue' } } } </script> <style scoped> div { font-size: 18px; color: blue; } </style>
四、webpack 配置
-
公用配置：webpack.config.base.js
const path = require('path') const { VueLoaderPlugin } = require('vue-loader') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.join(__dirname, '../dist'), publicPath: './' }, mode: process.env.NODE_ENV, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', include: [ path.resolve(process.cwd(), 'src'), ] }, { test: /\.js/, loader: 'babel-loader', exclude: /node_modules/ } ] }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ template: './index.html', filename: './index.html', inject: 'false', minify: { removeComments: true } }) ] } -
生产环境：webpack.config.dev.js
const base = require('./webpack.config.base.js') const { merge } = require('webpack-merge') const webpack = require('webpack') module.exports = merge(base, { devServer: { port: 8089, host: '127.0.0.1', publicPath: '/', open: true, hot: true, overlay: {errors: true} }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ] }) -
开发环境：webpack.config.pro.js
const base = require('./webpack.config.base') const { merge } = require('webpack-merge') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = merge(base, { output: { filename: 'js/[name][hash].js', chunkFilename: 'js/vendor[id][hash].js', }, optimization: { splitChunks: { cacheGroups: { styles: { name: 'styles', test: /\.css$/, chunks: 'all', enforce: true, }, vendor: { test: /node_modules/, name: 'vendor', chunks: 'all' } } } }, module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader }, 'css-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[hash].css' }), new CleanWebpackPlugin() ] })
五、启动服务
-
配置： 在 package.json 中配置
"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.dev.js", "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.pro.js " }- dev：开发环境，起服务
- build：生产环境，打包
-
启动服务
- 开发环境：
npm run dev - 生产环境：
npm run build
- 开发环境：
六、开发环境最终效果
webpack+vue 效果展示.jpg
