導讀
項目使用了 yarn ，一個快速、可靠、安全的依賴管理工具。yarn 是一個類似於npm的包管理工具，它是由 facebook 推出並開源，它在速度，離線模式，版本控制的方面具有獨到的優勢。此項目以此為基礎，寫一個購物商城的單頁面應用，下面記錄了項目開始前開發環境的簡單搭建過程。
更多信息和項目基礎搭建請點擊查看 webpack-iview-vue。
查看最終的效果請點擊查看 View online。喜歡就給個 star 吧😄
詳細內容
- 創建一個文件夾
- 進入該文件並初始化：
yarn init - 安裝webpack和webpack-cli：
yarn add webpack webpack-cli -D - 安裝vue：
yarn add vue - 安裝：
yarn add vue-loader less-loader postcss-loader css-loader style-loader url-loader file-loader html-webpack-plugin babel-loader babel-core babel-preset-env webpack-dev-server -D - 升級upgrade vue-template-compiler到和vue一致的版本（非必須）：
yarn upgrade vue-template-compiler@^2.5.16 -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>商城</title> </head> <body> <!-- 對應 main.js 中的掛載目標 --> <div id="app"></div> </body> </html> - 根路徑下創建文件夾src（放置網頁基礎文件，並在其中創建文件app.vue：
<template> <div class="textStyle">{{ textData }}</div> </template> <script> export default { data() { return { textData: 'Hello world' } } } </script> <style> .textStyle { background-color: aquamarine; } </style> - 在src文件夾下創建入口文件main.js：
import Vue from 'vue'; import App from './app.vue'; new Vue({ // 創建 vue 實例 el: '#app', // 提供一個在頁面上已經存在的 DOM 元素作為 Vue 實例掛載目標 render: (h) => h(App) // 聲明了 html 中的內容 }) - 根目錄下創建build文件夾(放置配置文件，並在其下創建webpack.config.js文件：
const path = require('path'); // node.js 中的基本包，用於處理路徑 const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { entry: path.join(__dirname,'../src/main.js'), // path.jion()將兩個參數代表的路徑相加組合起來，__dirname代表當前文件所在目錄 output: { filename: 'bundle.js', //輸出文件的文件名 path: path.join(__dirname,'../dist') // 輸出文件所在目錄 }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader' }, { test: /.css$/, use: [ 'style-loader', // 為 css 創建 style 標簽並置入其中插入頁面 'css-loader', // 處理 css 'postcss-loader', // 瀏覽器兼容問題 ] }, { test: /\.less/, use: [ 'style-loader', 'css-loader', 'postcss-loader', 'less-loader' // loader 由下往上依次開始處理 ] }, { test: /\.(jpg|png|gif|svg|jpeg)$/, use: [ { loader: 'url-loader', options: { // 配置參數 limit: 1024 // 比較標准，小於標准的圖片轉換為 base64 代碼 } } ] } ] }, plugins: [ // Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的 new VueLoaderPlugin() ] } - 在package.json添加以下內容：
"dev": "webpack --config build/webpack.config.js --mode development", "build": "webpack --config build/webpack.config.js --mode production" //webpack 用於執行webpack默認位置默認名稱的配置文件webpack.config.js，其后跟的參數 --config 用於對修改名稱或位置后的配置文件的運行 //--mode 后指定模式，development模式下的文件不壓縮
- 在根目錄增加文件postcss.config.js：
module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } } - html-webpack-plugin：
// 在webpack.config.js下引入html-webpack-plugin const HTMLWebpackPlugin = require('html-webpack-plugin'); 並在其plugins下增加： new HTMLWebpackPlugin({ //創建 .html 並自動引入打包后的文件 template: 'index.html', // 參照最初創建的 .html 來生成 .html inject: true }) - 支持ES6:
// 並在webpack.config.js里配置 { text: /\.js$/, use: [ { loader: 'babel-loader', options: { presets: ['env'] } } ] } - 在webpack.config.js中與entry同級處設置：
devtool: 'cheap-module-eval-source-map', - 將
webpack.config.js重新命名為webpack.base.config.js - 修改webpack.base.config.js如下：
"dev": "webpack-dev-server --base ./dist --open --inline --hot --compress --config build/webpack.base.config.js --mode development", "build": "webpack --config build/webpack.base.config.js --mode production"
寫在最后
在此記錄了項目開發環境的初步搭建，由於項目寫起來之后，書寫的地方來回切換不利於記錄，所以記錄的文本比較混亂，並不再繼續記錄開發的詳細步驟，若是文中有什么錯誤，還望大家指出。