一屉佳、初始化項(xiàng)目
- 創(chuàng)建項(xiàng)目文件夾
- 初始化
- 執(zhí)行命令
npm init
- 執(zhí)行命令
二谷朝、安裝依賴(lài)
-
安裝 webpack 相關(guān)依賴(lài)
npm i webpack webpack-cli webpack-dev-server -D-
webpack：模塊打包器 webpack -
webpack-cli：在控制臺(tái)運(yùn)行webpack命令的工具 命令行接口 -
webpack-dev-server：服務(wù)工具 開(kāi)發(fā)服務(wù)器
-
-
安裝 vue 相關(guān)依賴(lài)
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 新語(yǔ)法 處理 相關(guān)依賴(lài)
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 }
-
-
安裝 樣式處理 相關(guān)依賴(lài)
npm i style-loader css-loader -D -
安裝 其它依賴(lài)
npm i webpack-merge -D; npm i cross-env -D; npm i html-webpack-plugin -D npm i clean-webpack-plugin -D-
webpack-merge：用來(lái)合并配置文件 -
cross-env：設(shè)置當(dāng)前執(zhí)行環(huán)境的插件 -
mini-css-extract-plugin：將 css 代碼分離出來(lái)武花，方便緩存圆凰，生產(chǎn)環(huán)境下使用 -
clean-webpack-plugin：每次打包后清除 dist 文件
-
三、代碼編寫(xiě)
-
根目錄下創(chuàng)建 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> 根目錄下創(chuàng)建 src 文件夾
-
src 目錄下 創(chuàng)建 index.js
import Vue from 'vue' import App from './app.vue' new Vue({ el: "#app", render: h => h(App) }) -
src 目錄下 創(chuàng)建 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 } }) ] } -
生產(chǎn)環(huán)境：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() ] }) -
開(kāi)發(fā)環(huán)境：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() ] })
五专钉、啟動(dòng)服務(wù)
-
配置： 在 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：開(kāi)發(fā)環(huán)境，起服務(wù)
- build：生產(chǎn)環(huán)境累铅，打包
-
啟動(dòng)服務(wù)
- 開(kāi)發(fā)環(huán)境：
npm run dev - 生產(chǎn)環(huán)境：
npm run build
- 開(kāi)發(fā)環(huán)境：
六跃须、開(kāi)發(fā)環(huán)境最終效果
webpack+vue 效果展示.jpg
