提示：使用webpack前，請(qǐng)先安裝nodejs，并了解基本的npm命令，node建議使用最新的版本，webpack建議局部安裝
1：windows打開終端命令窗口，mkdir webpack_test
1.1 cd webpack_test
1.2npm init //初始化項(xiàng)目
1.3npm install webpack --save-dev
提示：在安裝一個(gè)要打包到生產(chǎn)環(huán)境的安裝包時(shí)，你應(yīng)該yeshi使用 npm install --save，如果你在安裝一個(gè)用于開發(fā)環(huán)境的安裝包（例如，linter, 測(cè)試庫(kù)等），你應(yīng)該使用 npm install --save-dev。
1.4 npm install webpack-cli --save-dev //webpack 4+版本要求安裝cli
提示：我們還需要調(diào)整 package.json 文件，以便確保我們安裝包是私有的(private)，并且移除 main 入口。這可以防止意外發(fā)布你的代碼。 添加："private": true, 刪除："main": "index.js",
1.5 創(chuàng)建配置文件
根目錄下創(chuàng)建webpack.config.js,入口文件index.js需要你自己創(chuàng)建
constpath=require('path');module.exports={
? ? entry:'./src/index.js',
? ? output:{
? ? ? ? filename:'bundle.js',
? ? ? ? path:path.resolve(__dirname,'dist')
? ? }
};
最后執(zhí)行 npx webpack --config webpack.config.js,會(huì)在根目錄下生成dist文件夾，里面有個(gè)bundle.js文件，也就是輸出文件
1.6 到package.json文件，在script里面添加 “build”:"webpack",npm run build 命令，來(lái)替代我們之前使用的 npx 命令
此時(shí)每次更改代碼都需要，npm run build? ,在package.json的script里添加 “watch”:"webpack --watch",執(zhí)行npm run watch 就會(huì)監(jiān)聽你代碼的改變,ctrl+c退出監(jiān)聽
此時(shí)一個(gè)包含入口出口文件的項(xiàng)目就算是構(gòu)建成了，目錄結(jié)構(gòu)如下，dist文件夾下的html文件是自己創(chuàng)建，src以及index.js也是自己創(chuàng)建，webpack.config.js是配置文件，更多配置文件的介紹請(qǐng)看config詳情
webpack_test
|- package.json
|- webpack.config.js
|- /dist
? ? ? |- bundle.js
? ? ? |- index.html
|- /src
? ? ? |- index.js
|- /node_modules
webpack起步介紹請(qǐng)看? webpack開發(fā)指南
加載vue文件，依賴vue-loader, vue-loader依賴vue-template-compiler，而 vue-loader v15+版本需要在webpack.config.js添加
const VueLoaderPlugin = require('vue-loader/lib/plugin');
,plugins: [ //配置插件的節(jié)點(diǎn)
????????//new一個(gè)VueLoaderPlugin
? ? ? ? new VueLoaderPlugin()
? ? ],
