webpack的配置彙總

配置打包的入口與出口

1. 默認約定webpack 的 4.x 版本中默認約定

1. 打包的 入口文件爲 src -> index.js

2. 打包的 輸出文件爲 dist -> main.js

   2. 修改 修改打包的入口與出口，能夠在 webpack.config.js 中新增長以下配置信息

const path = require('path') // 導入 node.js 中專門操做路徑的模塊 path
module.exports = {
entry: path.join(_dirname,'./src/index.js'),//打包入口文件的路徑
output: { 
        path: path.join(__dirname,'./dist'), // 輸出文件的存放路徑
        filename: 'bundle.js' //輸出文件的名稱
    }
}

3. 在終端中運行以下命令，測試 打包 入口與出口是否更改

npm run dev

打包完成以後，會在 dist 文件夾裏面 會自動生成 bundle.js ,而後 再回到 src -> index.html 中，從新引入 打包以後的 bundle.js 文件，運行 index.html，依然能夠照常運行。

可是此時咱們會發現，每次 js 更改以後咱們都須要從新手動打包，那要怎麼樣才能是實現自動打包的功能呢？請繼續往下看

配置自動打包

1. 在終端中運行以下命令，安裝支持項目自動打包的工具

npm install webpack-dev-server -D

2. 修改 package.json 文件中 scripts 對象的 dev 命令,以下配置：

// package.json 中的配置
"scripts": {
    "dev": "webpack-dev-server" // script 節點下的腳本，能夠經過 npm run 執行
  },

3. 將 src -> index.html 中，scripts 腳本的引用路徑 ，修改成根目錄下的 buldle.js

<script src="/bundle.js"></script>

4. 運行 以下命令，從新運行打包

npm run dev

5. 複製終端中的http:localhost:8080 地址，而後在在瀏覽器中訪問就可看到打包以後的項目。

注意：

• webpack-dev-server 會啓動一個實時打包的 http 服務器
  
• webpack-dev-server 打包生成的輸出文件，默認放到了項目根目錄中，並且是虛擬的，看不到的

6. 此時項目的運行須要咱們在瀏覽器手動輸入地址才能夠訪問，那我要想項目啓動以後自動彈開瀏覽器要怎麼配置呢？

須要咱們修改 package.json 文件中 scripts 對象的 dev 的相關參數，具體修改以下：

// package.json 中的配置
// --open 打包完成後自動打開瀏覽器頁面  --host 配置 IP地址  --port 配置端口
"scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.0 --port 8888"
}

修改以後從新運行 npm run dev 命令進行打包會發現項目自動彈出瀏覽器，說明咱們已經配置成功了～

可是此時咱們會發現項目雖然正常運行，沒有報錯，但卻不是咱們想要的頁面。
那要怎樣才能夠直接預覽到咱們想要的頁面呢？請繼續往下看

配置預覽頁面

1. 在終端中運行以下命令，安裝生成預覽頁面的插件

npm install html-webpack-plugin -D

2. 修改 webpack.config.js 文件頭部區域,添加以下配置信息：

// 導入生成預覽頁面的插件，獲得一個構造函數
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({//建立插件的實例對象
  template: './src/index.html',// 指定要用到的模版文件
  filename: 'index.html'//指定生成的文件的名稱，該文件存在於內存中，在目錄中不顯示
})

3. 修改 webpack.config.js 文件中向外暴露的配置對象 ，新增以下配置節點：

module.exports = {
  plugins: [ htmlPlugin ] //plugin 數組是 webpack 打 包期間會用到的一些插件列表
}

4. 此時再 運行 以下命令，從新運行打包

npm run dev

5. 在瀏覽器中 繼續訪問 http:localhost:8080 地址，既能夠看到咱們想要的頁面。

注意：

• webpack-dev-server 會啓動一個實時打包的 http 服務器
  
• webpack-dev-server 打包生成的輸出文件，默認放到了項目根目錄中，並且是虛擬的，看不到的