從零搭建VUE2-webpack4.0 開發環境
和《從零搭建 vue2 vue-router2 webpack3 工程》同樣，以新手視角，詳細介紹各個步驟內容，不深刻講步驟涉及的原理，主要介紹如何操做。javascript
文中示例工程地址：https://github.com/qinshenxue/vue2-vue-router2-webpack4。css
初始化工程
新建工程目錄 vue2-vue-router2-webpack4，在目錄下執行npm init -y來建立一個 package.json，在 package.json 中先添加如下必要模塊：html
{
"name": "vue2-vue-router2-webpack4", "version": "1.0.0", "devDependencies": { "vue": "^2.5.17", "vue-loader": "^15.4.1", "vue-router": "^3.0.1", "vue-template-compiler": "^2.5.17", "webpack": "^4.17.1", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.6" } }
Webpack 4 開始，命令行工具（CLI）須要單獨安裝。vue
新建目錄結構以下，新增的目錄及文件先空着，後面的步驟會說明添加什麼內容。java
vue2-vue-router2-webpack4
|-- package.json
|-- index.html // 訪問首頁
|-- webpack.config.js // Webpack 配置文件
|-- src
|-- views // Vue 頁面目錄
|-- main.js // 入口起點
|-- router.js // vue-router 配置
|-- app.vue // Vue 根組件
配置 Webpack
Webpack 默認讀取 webpack.config.js，文件名不能隨便改，其中 entry 是必須配置的，構建時，output.filename是必需的。node
module.exports = { mode: "development", entry: './src/main.js', output: { path: __dirname + '/dist', publicPath: '/static/', filename: 'build.js' } }
Webpack 4 增長了 mode 配置項，支持配置
"production" | "development" | "none"三個可選配置，默認爲"production"。android
mode 的做用能夠簡單歸納爲把各個環境經常使用的配置縮減爲一個配置。webpack
配置爲 development 背後其實是包含了以下配置。git
module.exports = { devtool: 'eval', plugins: [ new webpack.NamedModulesPlugin(), new webpack.NamedChunksPlugin(), new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }) // 設置環境變量爲 '"development"' ] }
配置爲 production 背後其實是包含了以下配置。github
module.exports = { mode: 'production', plugins: [ new UglifyJsPlugin(/* ... */), // 壓縮 // 設置環境變量爲 '"production"' new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }), // 做用域提高 new webpack.optimize.ModuleConcatenationPlugin(), new webpack.NoEmitOnErrorsPlugin() ] }
webpack-dev-server 不須要配置文件，直接使用其 CLI 提供的命令便可。
"scripts": { "dev": "webpack-dev-server --hot --open" }
驗證配置
在 index.html 中添加測試代碼，引入打包後的 JavaScript 文件。
<body> Hello, Webpack 4. <br> <script src="/static/build.js"></script> </body>
在 main.js 中添加測試代碼。
// main.js document.write('來自 main.js 的問候！')
執行下面的命令來安裝依賴模塊並啓動本地服務器。
# 安裝依賴模塊 npm install # 啓動本地服務器 npm run dev
啓動後瀏覽器會自動打開http://localhost:8080，若是控制檯沒有報錯，頁面正確顯示 main.js 和 index.html 的內容，改動 main.js 後瀏覽器會自動刷新，則表示配置沒問題。
Vue
新建頁面。
在 views 目錄下新建 index.vue。
<template> <div> 這是{{page}}頁面 </div> </template> <script> export default { data: function () { return { page: 'index' } } } </script>
配置路由
將 vue-router 實例化傳入的參數提取到 router.js 做爲路由配置文件。
import index from './views/index.vue' export default { routes: [ { path: '/index', component: index } ] }
修改首頁
在 index.html 添加 Vue 根實例的掛載元素。
<body> <div id="app"></div> <script src="/static/build.js"></script> </body>
修改入口
在 main.js 完成路由配置、初始化 Vue 實例。
import Vue from "vue" import VueRouter from "vue-router" import App from "./app.vue" import routerConfig from "./router" Vue.use(VueRouter) const router = new VueRouter(routerConfig) new Vue({ el: "#app", router: router, render: h => h(App) })
在根組件 app.vue 中添加路由連接、路由視圖組件。
<template> <div> <div> <router-link to="/index">Home</router-link> </div> <div> <router-view></router-view> </div> </div> </template>
配置 loader
配置 .vue 文件對應的 loader。
const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { mode: "development", entry: './src/main.js', output: { path: __dirname + '/dist', publicPath: '/static/', filename: 'build.js' }, module: { rules: [{ test: /\.vue$/, use: ["vue-loader"] }] }, plugins: [ new VueLoaderPlugin() ] }
vue-loader 從 v15.0.0 開始，配置須要引入
vue-loader/lib/plugin，並在 plugins 中初始化。詳細請參考官方文檔 https://vue-loader.vuejs.org/zh/guide/#vue-cli。
上面完成了訪問一個頁面所須要的步驟，接下來能夠啓動本地服務器（npm run dev）來測試可否正常訪問/index。
支持 CSS
直接在 .vue 文件中使用 CSS 會提示You may need an appropriate loader to handle this file type.，CSS 對應的 loader 爲css-loader 。
npm install css-loader -D
vue-loader v15.0.0 以前不須要配置 loader 就能夠在 vue 文件中使用 CSS，須要用 import 或 require CSS 文件時才須要配置 loader，而 v15.0.0 以後均須要本身配置 loader 纔不會報錯。
{
test: /\.css$/, use: ["vue-style-loader", "css-loader"] }
import './assets/css/style.css'
vue-style-loader 是 vue-loader 的 dependencies，所以不須要再本身安裝，css-loader 是 vue-loader 的 peerDependencies，須要本身安裝。
支持 CSS 預處理語言
根據須要安裝預處理語言模塊及對應的 loader。
# less npm install less less-loader -D # sass npm install node-sass sass-loader -D # stylus npm install stylus stylus-loader -D
node-sass 安裝慢的解決辦法：
- 使用淘寶鏡像：
npm set disturl https://npm.taobao.org/dist - 也能夠單獨設置 node-sass 鏡像：
npm set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
各類預處理語言的 loader 配置。
// less { test: /\.less$/, use: ["vue-style-loader", "css-loader", "less-loader"] } // sass { test: /\.s[ac]ss$/, use: ["vue-style-loader", "css-loader", "sass-loader"] } // stylus { test: /\.styl$/, use: ["vue-style-loader", "css-loader", "stylus-loader"] }
使用示例。
<style lang="less"> .view{ color:red; } </style> <style lang="sass"> .view{ border-bottom:1px solid #ddd; } </style> <style lang="styl"> .view margin-top:20px; </style>
支持圖片及圖標字體
安裝圖片及圖標字體依賴的 loader。
npm install url-loader file-loader -D
配置圖片及圖標字體對應的 loader。
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [{ loader: "url-loader", options: { limit: 10000, name: 'images/[name].[hash:7].[ext]' // 將圖片都放入 images 文件夾下，[hash:7]防緩存 } }] }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: [{ loader: "url-loader", options: { limit: 10000, name: 'fonts/[name].[hash:7].[ext]' // 將字體放入 fonts 文件夾下 } }] }
構建
使用 Webpack CLI 提供的命令構建。點擊查看 Webpack 命令參數
"build": "webpack --progress"
執行npm run build開始構建，完成後，能夠看到工程目錄下多了 dist 目錄，裏面包含了打包後的 JavaScript 文件、圖片、圖標字體文件，可是打包後的 JavaScript 文件沒有被壓縮，裏面還包含了 CSS 代碼，語法也沒有被轉換成 ES5，這些工做就須要使用 Webpack 插件來完成。
使用 Webpack 插件
Babel
Babel 7 正式版已經發布，較 Babel 6 變化以下：
- 再也不支持不在維護中的 Node 版本：0.十、0.十二、四、5；
- 使用 @babel 命名空間，所以 babel-core 就變成了 @babel/core；
- 移除（並中止發佈）任何年度預設（preset-es2015 等），@babel/preset-env 取代了對這些內容的需求 ;
- 移除「Stage」 預設（@babel/preset-stage-0 等），同時移除了 @babel/polyfill 中的提議；
- 重命名了某些包：任何 TC39 提議插件如今都是 -proposal 而不是 -transform，因此 @babel/plugin-transform-class-properties 變成了 @babel/plugin-proposal-class-properties；
- 針對某些面向用戶的包（例如 babel-loader、@babel/cli 等）在 @babel/core 中引入 peerDependency。
安裝 Babel。
npm install babel-loader @babel/core @babel/cli @babel/preset-env -D
增長 Babel 配置文件 babel.config.js。
const presets = [ ["@babel/env", { targets: { ie: "9" }, modules: false }] ] module.exports = { presets }
配置 babel-loader。
{
test: /\.js$/, exclude: /node_modules/, use: ["babel-loader"] }
壓縮
上面提到過， Webpack 4 新增的 mode 配置項配置爲'production'時，已經包含了壓縮插件（new UglifyJsPlugin()），所以不用再額外配置。
提取 CSS
extract-text-webpack-plugin 不支持 Webpack 4，提取 CSS 改用 mini-css-extract-plugin
npm i mini-css-extract-plugin -D
調整 Webpack 配置以下。
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { //... module: { rules: [{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] }, { test: /\.less$/, use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"] }, { test: /\.s[ac]ss$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] }, { test: /\.styl$/, use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"] } //... ] }, plugins: [ // ... new MiniCssExtractPlugin({ filename: 'css/style.css' }) ] }
vue-loader 不須要單獨配置就能夠提取 vue 文件中的 CSS。在 index.html 中引入 CSS 文件便可看到效果。
CSS 壓縮及優化
安裝 postcss-loader 及 PostCSS 插件。
npm install postcss-loader autoprefixer cssnano -D
loader 配置調整以下。
{
test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader", 'postcss-loader'] }, { test: /\.less$/, use: [MiniCssExtractPlugin.loader, "css-loader", 'postcss-loader', "less-loader"] }, { test: /\.s[ac]ss$/, use: [MiniCssExtractPlugin.loader, "css-loader", 'postcss-loader', "sass-loader"] }, { test: /\.styl$/, use: [MiniCssExtractPlugin.loader, "css-loader", 'postcss-loader', "stylus-loader"] }
postcss-loader 要放在 css-loader 後，CSS 預處理語言的 loader 以前。
新增 postcss-loader 須要配置文件 postcss.config.js，引入插件。
module.exports = { plugins: [ require('autoprefixer')({ browsers: ['android > 4'] }), require('cssnano') ] }
PostCSS 插件分類搜索網站：http://postcss.parts/
生成首頁
手動引入打包後的 JavaScript 和 CSS 比較麻煩，使用 html-webpack-plugin 插件生成的頁面自動引入了打包後的資源。
npm install html-webpack-plugin -D
初始化插件。
var HtmlWebpackPlugin = require('html-webpack-plugin') plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.tpl.html' }) ]
index.tpl.html
<html> <head> ... </head> <body> <div id="app"></div> </body> </html>
分離 Webpack 配置
將開發和生產配置文件分離，方便增長各個環境下的個性配置。Webpack 官方文檔中也詳細闡述瞭如何爲多環境增長配置文件，基本思路以下。
- 編寫一個基本配置文件（webpack.base.config.js）
- 使用 webpack-merge 合併這個基礎配置和針對環境的特定的配置（webpack.dev.config.js，webpack.prod.config.js）
webpack.base.config.js 內容以下。
const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { entry: './src/main.js', output: { filename: 'js/[name].js' }, module: { rules: [{ test: /\.vue$/, use: ["vue-loader"] }, { test: /\.js$/, exclude: /node_modules/, use: ["babel-loader"] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [{ loader: "url-loader", options: { limit: 10000, name: 'images/[name].[hash:7].[ext]' // 將圖片都放入 images 文件夾下，[hash:7]防緩存 } }] }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: [{ loader: "url-loader", options: { limit: 10000, name: 'fonts/[name].[hash:7].[ext]' // 將字體放入 fonts 文件夾下 } }] } ] }, plugins: [ new VueLoaderPlugin() ] }
開發環境通常不配置提取 CSS，而生產環境須要配置，所以上面的基礎配置不包含 CSS loader。path 和 publicPath 在開發和生產環境下通常不一樣，所以也不包含在基礎配置中。
開發配置文件（webpack.dev.config.js）內容以下內容以下。
const merge = require("webpack-merge") const HtmlWebpackPlugin = require("html-webpack-plugin") const baseWebpackConfig = require("./webpack.base.config") module.exports = merge(baseWebpackConfig, { mode: 'development', output: { publicPath: "/" }, module: { rules: [{ test: /\.css$/, use: ["vue-style-loader", "css-loader", 'postcss-loader'] }, { test: /\.less$/, use: ["vue-style-loader", "css-loader", 'postcss-loader', "less-loader"] }, { test: /\.s[ac]ss$/, use: ["vue-style-loader", "css-loader", 'postcss-loader', "sass-loader"] }, { test: /\.styl$/, use: ["vue-style-loader", "css-loader", 'postcss-loader', "stylus-loader"] }] }, plugins: [ new HtmlWebpackPlugin({ filename: "index.html", template: "index.tpl.html" }) ] })
生產配置文件（webpack.prod.config.js）內容以下。
const merge = require("webpack-merge") const HtmlWebpackPlugin = require("html-webpack-plugin") const MiniCssExtractPlugin = require("mini-css-extract-plugin") const baseWebpackConfig = require("./webpack.base.config") const path = require('path') module.exports = merge(baseWebpackConfig, { mode: 'production', output: { path: path.resolve(__dirname, '../dist') publicPath: "/static/" }, module: { rules: [{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader", 'postcss-loader'] }, { test: /\.less$/, use: [MiniCssExtractPlugin.loader, "css-loader", 'postcss-loader', "less-loader"] }, { test: /\.s[ac]ss$/, use: [MiniCssExtractPlugin.loader, "css-loader", 'postcss-loader', "sass-loader"] }, { test: /\.styl$/, use: [MiniCssExtractPlugin.loader, "css-loader", 'postcss-loader', "stylus-loader"] }] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/style.css' }), new HtmlWebpackPlugin({ filename: "index.html", template: "index.tpl.html" }) ] })
對應在 package.json 中添加開發和生產構建的命令以下。
"scripts": { "dev": "webpack-dev-server --progress --hot --open --config build/webpack.dev.config.js", "build": "webpack --progress --config build/webpack.prod.config.js", }
本文地址: https://www.qinshenxue.com/article/vue2-vue-router2-webpack4.html
- 1. 從零搭建STM32開發環境（一）
- 2. 從零搭建vue+express開發環境
- 3. 從零搭建 React 開發環境
- 4. Webpack4從零搭建React開發環境
- 5. 從零搭建wondertrader的開發環境
- 6. 從零搭建 Vite + React 開發環境
- 7. 從零開始開發Python程序（一）—— 搭建開發環境
- 8. MacBook從零開始搭建java環境
- 9. 從零開始搭建Java環境
- 10. 從零開始搭建Yapi環境
- 更多相關文章...
- • Swift 環境搭建 - Swift 教程
- • Rust 環境搭建 - RUST 教程
- • PHP開發工具
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。