創(chuàng)建項(xiàng)目

• 前提，已經(jīng)安裝好NodeJs，npm等環(huán)境
• 第一步，新建項(xiàng)目文件夾，例如名為webpack的文件夾
  
  文件夾示例圖片

開始操作

• 第二步，進(jìn)入cmd，在這個(gè)目錄下也就是webpack文件夾路徑下，執(zhí)行命令 npm init -y，這個(gè)操作不會(huì)出現(xiàn)交互式界面，直接在文件夾目錄下生成package.json文件，package.json文件指出了我們的項(xiàng)目需要哪些依賴，在項(xiàng)目轉(zhuǎn)移的時(shí)候不需要拷貝node_modules文件夾，在目錄下執(zhí)行npm install命令就可以重新生成全部依賴，package.json中內(nèi)容如下：

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }

• 第三步，執(zhí)行命令npm install webpack webpack-cli --save-dev 安裝webpack和wenpack-cli套件，我換成了淘寶的鏡像就把npm改為cnpm
• 第四步，新建如下的項(xiàng)目結(jié)構(gòu)，src是源文件目錄，dist是需要在瀏覽器中運(yùn)行引用的目錄

webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
+ |- /src
+   |- index.js

• 第五步，修改package.json，增加"private": true，表明是私有的，避免不小心把項(xiàng)目發(fā)布了，注釋掉"main":"index.js"，main的意思是發(fā)布后，加載的入口文件

• 第六步，安裝其他依賴，基本的命令是npm install --save xxxx，這個(gè)步驟的作用是可以讓我在html中不需要去引入<script>標(biāo)簽，然后會(huì)在項(xiàng)目中生成node_modules文件夾，--save xxxx和--save-dev的區(qū)別在于，--save-dev所安裝的依賴只是開發(fā)過(guò)程中使用，而--save是項(xiàng)目發(fā)布后還能用到的依賴
  

• 第七步，一般來(lái)說(shuō)，在需要?jiǎng)偛虐惭b的依賴的js頭部添加import _ from 'xxxx';表明將依賴引入

• 在第七步之后，執(zhí)行npx webpack，這個(gè)命令不常見，因?yàn)檫€有接下來(lái)的操作，執(zhí)行這個(gè)命令后會(huì)把src文件夾下的index.js和所需依賴一起打包成mian.js文件放到了dist目錄下，但是為了更好的配置加載項(xiàng)我們需要在項(xiàng)目結(jié)構(gòu)中增加webpack.config.js

webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack配置文件內(nèi)容

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

執(zhí)行npx webpack --config webpack.config.js命令就是按照這個(gè)配置文件來(lái)打包

• 第八步，我們可以設(shè)置一個(gè)類似快捷方式的語(yǔ)句，不需要每次都執(zhí)行npx webpack --config webpack.config.js，方法是在package.json中添加"build": "webpack"，package.json中內(nèi)容如下：

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

之后每次我們只要執(zhí)行npm run build命令就可以了