webpack項目建立步驟

一、在項目根目錄運行 npm init -y 命令快速初始化項目

二、在項目根目錄建立 src 源代碼目錄和 dist 產品目錄

三、在src目錄下建立index.html文件

四、使用npm安裝webpack,webpack-cli, 執行以下命令便可

npm i webpack webpack-cli -D

五、項目根目錄下新建webpack.config.js文件，進行相關配置

module.exports = {
    mode: 'development',      // mode, 有development和production 開發模式和生產模式兩種
    // entry: './src/index.js'   // 入口文件配置，可不進行配置，約定默認指向src目錄下的index.js 文件，也可自定義配置
   }

六、執行命令 webpack 項目即進行webpack打包，會在dist目錄下自動生成main.js文件，在src目錄下index.html文件中引入該main.js文件便可生效

webpack
  
 // 在每次修改代碼後都須要執行 webpack 命令從新打包後纔可生效，咱們通常但願每次修改代碼保存後就可打包完成，而不是每次都須要執行 webpack命令，由此引入 webpack-dev-server 插件

七、webpack-dev-server 實時打包

webpack-dev-server 打包好的main.js是託管到了內存中，因此在項目中有一個看不見的main.js

安裝webpack-dev-server,執行以下命令

npm i webpack-dev-server -D

在package.json文件中作以下配置

"scripts": {
      "dev": "webpack-dev-server"
    }

作完上述配置便可運行 npm run dev 命令啓動項目，運行在 localhost:8080,這時index.html文件中js文件引入應改成 <script src="/main.js"></script> 根目錄下那個看不見的main.js

這時想訪問index.html文件須要訪問地址 localhost:8080/index.html,咱們但願localhost:8080地址可以直接訪問到index.html 則須要藉助 html-webpack-plugin

webpack.config.js

const path = require('path')      // 引入path 模塊，後續會用到
  const HtmlWebpackPlugin = require('html-webpack-plugin') // html-webpack-plugign 是node 中的一個模塊，可直接用require引入
  而後建立 HtmlWebpackPlugin 的實例對象
  const htmlPlugin = new HtmlWebpackPlugin({
        template: path.join(_dirname, './src/index.html')，      // 源文件模板，這裏指向src下的index.html
        filename: 'index.html'      // 生成內存中的首頁名稱
  })
  plugins: [htmlPlugin] // 插件放到webpack.config.js的配置對象中

這時再運行 npm run dev 便可在localhost:8080中訪問到index.html的內容