參考文檔：https://segmentfault.com/a/1190000012789253?utm_source=tag-newest
webpack配置參考了vue-cli提供webpack-simple模板，這也是vue-cli里面最簡單的一個webpack配置，非常適合從零開始學習（自行安裝node.js）
1、查看npm -v是否已經安裝
npm -v
2、安裝webpack
npm i webpack -g
3、安裝webpack4
npm i webpack-cli -g
上一步中安裝位置需要配置到環境變量
安裝vue
npm install vue vue-cli -g
檢查安裝vue情況
4、新建一個文件夾vue-webpack-simple
新建package.json
5、進入剛剛創建的目錄
6、執行
npm init -y
安裝vue webpack webpack-dev-server
npm i vue --save
npm i webpack webpack-dev-server --save-dev
7、根目錄下新建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>Document</title> </head> <body> </body> </html>
8、根目錄下新建webpack.config.js
var path = require('path'); var webpack = require('webpack'); module.exports = {};
9、新建src文件夾，src文件夾下新建main.js
整個項目的結構如下
10、JS模塊化
在ES6出現之前，js是沒有統一的模塊體系。
服務器端使用CommonJS規范,而瀏覽器端又有AMD和CMD兩種規范webpack的思想就是一切皆模塊，官方推薦使用commonJS規范，這使得我們瀏覽器端也可以使用commonJS的模塊化寫法
module.exports = {}
11、src目錄下新建一個util.js
module.exports = function say() { console.log('hello world'); }
main.js
var say = require('./util'); say();
修改webpack.config.js
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './src/main.js', // 項目的入口文件，webpack會從main.js開始，把所有依賴的js都加載打包 output: { path: path.resolve(__dirname, './dist'), // 項目的打包文件路徑 publicPath: '/dist/', // 通過devServer訪問路徑 filename: 'build.js' // 打包后的文件名 }, devServer: { historyApiFallback: true, overlay: true } };
修改package.josn
"scripts": { "dev": "webpack-dev-server --open --hot", "build": "webpack --progress --hide-modules" },
注意：webpack-dev-server會自動啟動一個靜態資源web服務器 --hot參數表示啟動熱更新
修改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>Document</title> </head> <body> <script src="/dist/build.js"></script> </body> </html>
11、運行
npm run dev
可以發現瀏覽器自動打開的一個頁面，查看控制台，有hello world打出
隨意修改util.js，可以發現瀏覽器會自動刷新，非常方便。
12、打包后的bundle.js文件，運行
npm run build
13、可以看到生成了一個dist目錄，里面就有打包好后的bundle.js
21、引入vue
安裝vue
npm install vue
main.js
import Vue from 'vue'; var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } });
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>Document</title> </head> <body> <div id="app"> {{message}} </div> <script src="/dist/build.js"></script> </body> </html>
修改webpack.config.js文件
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, devServer: { historyApiFallback: true, overlay: true }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } };
22、重新執行
npm run dev
31、引入scss和css
webpack默認只支持js的模塊化，如果需要把其他文件也當成模塊引入，就需要相對應的loader解析器
npm i node-sass css-loader vue-style-loader sass-loader --save-dev
或者單獨安裝scss
npm install scss-loader scss --save-dev
webpack.config.js
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, devServer: { historyApiFallback: true, overlay: true }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ], } ] } };
解釋：
{ test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ], }
匹配后綴名為css的文件,然后分別用css-loader，vue-style-loader去解析
解析器的執行順序是從下往上(先css-loader再vue-style-loader)
*用vue開發，所以使用vue-style-loader，其他情況使用style-loader
css-loader使得我們可以用模塊化的寫法引入css,vue-style-loader會將引入的css插入到html頁面里的style標簽里
要引入scss也是同理的配置寫法:
module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ], }, { test: /\.sass$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax' ], }] }
在src目錄下新建style目錄，style目錄里新建common.scss
body {
background: #fed;
}
main.js
import './style/common.scss';
運行效果
npm run dev
41、使用babel轉碼
ES6的語法大多數瀏覽器依舊不支持,bable可以把ES6轉碼成ES5語法，這樣我們就可以大膽的在項目中使用最新特性了
npm i babel-core babel-loader babel-preset-env babel-preset-stage-3 --save-dev
項目根目錄新建一個.babelrc文件
{ "presets": [ ["env", { "modules": false }], "stage-3" ] }
webpack.config.js添加一個loader
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
exclude表示忽略node_modules文件夾下的文件，不用轉碼，試下async await語法
util.js
export default function getData() { return new Promise((resolve, reject) => { resolve('ok'); }) }
main.js
import getData from './util'; import Vue from 'vue'; import './style/common.scss'; var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { async fetchData() { const data = await getData(); this.message = data; } }, created() { this.fetchData(); } });
控制台會報一個錯誤regeneratorRuntime is not defined，因為我們沒有安裝babel-polyfill
npm i babel-polyfill --save-dev
修改webpack.config.js的入口
entry: ['babel-polyfill', './src/main.js'],
重新npm run dev，可以發現正常運行