第一步：創建項目文件夾
mkdir webpack-vue
第二步：使用vscode打開文件夾，經行npm初始化
npm init -y
第三步：下載項目需要資源包
生產環境 vue
npm install --save vue
開發環境 webpack
1. 他是基於nodeJs，所以要確保安裝了nodeJs --save-dev工具類型加dev
2. npm install --save-dev webpack 或者 npm install --save-dev webpack@<version> （提供核心功能）
3. npm install --save-dev webpack-cli(提供命令命令行)或者npm install --save-dev webpack-command
注意4.x以上的webpack才需要安裝webpack-cli
第四步：在項目文件夾（webpack-vue）里面創建一個src文件夾，用來存放源文件（source）
//在src文件里面創建一個入口js--->index.js var a=0; alert(a);
第五步：在項目根目錄創建一個index.html文件，作為入口文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <h1>我是入口文件</h1> 11 </body> 12 </html>
第六步：安裝需要使用的插件
1. 找到需要使用插件並安裝他 - 命令：npm install --save-dev html-webpack-plugin 2. 在webpack.config.js中引入他 - const HtmlWebpackPlugin=require('html-webpack-plugin') 3. 在plugins選項中調用他，並按照他的文檔中區做配置 - //插件，將index.html文件自動打包到dist文件夾里面 plugins:[ //自動生成一個index.html文件在出口位置，並且會自動在生成的文件中引入打包的js文件 new HtmlWebpackPlugin({}); ]
第七步：在項目根目錄創建一個webpack.config.js文件（這是一個webpack的配置文件）
/** 五大核心 0. 模式 指定這次打包是大的開發環境用的包（不壓縮），還是生產環境的包（壓縮）。4.x版本的webpack支持的 1. 入口 指定webpack需要打包的項目的入口文件 2. 出口 打包之后生成的文件需要放到哪個位置 3. 加載器 默認情況下，webpack只是簡單的打包js文件，如果需要打包css，img之類的文件則需要添加相對應的加載器，去處理這種類型的文件。 4. 插件 插件是加載器干不了的事情，就可以使用插件來干. ps: 前三個，模式，入口，出口。必須配置 */ //如何配置 //1. 就是在webpack.config.js文件中，暴露一個對象，使用commonjs方式暴露
1 /** 2 * 1.模式：開發或者生產模式（4.x版本的webpack才分模式） 3 * 2.入口 4 * 3.出口 5 * 4.插件 6 * 5.加載器 7 * ps：123必須配置 8 */ 9 10 // 引入nodejs內置模塊path 11 const path = require('path'); 12 // 引入webpack的插件HtmlWebpackPlugin，需要安裝：npm i --save-dev html-webpack-plugin 13 const HtmlWebpackPlugin = require('html-webpack-plugin') 14 15 // 將這個文件暴露出去 16 17 module.exports = { 18 // 模式 19 mode: 'development', //production(生產模式) 20 21 // 入口(從何處開始打包) 22 23 entry: './src/index.js', //就是入口js文件路徑。可以是絕對路徑也可以是相對路徑 24 25 // 出口（打包的文件放在哪） 26 27 output: { 28 //必須是絕對路徑,打包之后會再這個路徑下創建一個dist文件夾 29 path: path.resolve(__dirname, './dist'), 30 // 設置打包之后的文件名 31 filename: 'bundle.js' 32 }, 33 34 // 插件 35 36 plugins:[ 37 /** 38 * 1.因為是插件，可能由多個，所以使用數組類型 39 * 2.自動生成一個index.html文件在出口位置（dist文件夾里面），並且自動在生成的文件中引入js文件 40 * 3.詳細配置可以在webpack官網的插件選擇里面找到 41 * 4.https://github.com/jantimon/html-webpack-plugin#configuration 42 */ 43 44 /** 45 * HtmlWebpackPlugin插件 46 * 將index.html入口html文件自動打包到dist文件夾中 47 */ 48 new HtmlWebpackPlugin({ 49 filename:'entry.html', 50 // 讓這個文件內容和根目錄的html完全一致 51 template: './index.html' 52 }) 53 ] 54 }
第八步：打包
沒有全局安裝webpack要執行下列命令。否則直接$webpack 1. ./node_modules/.bin/webpack 2. npx webpack(npm 5.x+新增的功能) 3. 配置package.json的npm腳本
項目目錄
項目的目錄結構 1 dist （最終生成的文件，這個文件夾才是最終需要上傳到服務器上的代碼） 3 node_modules（放資源包） 4 src (源文件，需要被webpack打包的文件，都需要放在這個文件夾下面，都是一些自己寫的項目模塊) - index.js （這個是項目打包入口） 5 index.html （這個是我們的項目頁面入口） 6 packge-lock.json(包鎖文件) 7 packge.json（項目依賴的資源包與項目的描述信息的文件） 8 webpack.config.js(webpack的配置文件) 上面三個文件，這三個文件都不是真正需要上線（將項目放到服務器）的內容。於是我們需要webpack打包（抽取其中真真需要用的內容）