1、webpack基礎(chǔ)配置

注意：webpack需要在node環(huán)境下使用，因此使用webpack前，需要安裝node.js。

1. 創(chuàng)建一個(gè)文件夾webpack_dev1，進(jìn)入文件夾啟動(dòng)命令執(zhí)行器，輸入npm init -y
   進(jìn)行初始化，初始化后會(huì)生成一個(gè)package.json文件。

2. 安裝webpack和webpack-cli（因?yàn)槭褂玫氖莣ebpack4.0所有要安裝webpack-cli）,輸入命令npm install webpack webpack-cli -D（-D表示不會(huì)打包到項(xiàng)目里，具體的可以去了解npm），執(zhí)行結(jié)束后會(huì)產(chǎn)生node_modules文件夾和package-lock.json

3. 在webpack_dev1文件夾下面創(chuàng)建一個(gè)webpack.config.js來設(shè)置基礎(chǔ)配置，接這新建src文件夾用來存放代碼文件，在src文件下面創(chuàng)建一個(gè)index.js文件。

4. webpack.config.js內(nèi)容

//webpack是node寫出來的，所以要采用node的寫法
const path = require('path')
module.exports = {
  mode: 'development', //模式，默認(rèn)兩種 production, development
  entry: './src/index.js', //入口
  output: {  //出口
    filename: 'bundle.js', //打包后的文件名
    path: path.resolve(__dirname, 'dist'),//路徑必須是個(gè)絕對(duì)路徑, __dirname表示在當(dāng)前目錄下產(chǎn)生一個(gè)dist
  }
}

5. 輸入npx webpack進(jìn)行打包，執(zhí)行結(jié)束后會(huì)在當(dāng)前目錄下生成一個(gè)dist文件, 目錄結(jié)構(gòu)如下

webpack_dev1
|
|-- dist
|   |-- bundle.js   
|-- node_modules
|-- src
|   |--index.js
|-- package-lock.json
|-- package.json
|-- webpack.config.js