webpack的配置彙總

配置打包的入口與出口

1. 默認約定webpack4.x 版本中默認約定

  1. 打包的 入口文件爲 src -> index.js
  2. 打包的 輸出文件爲 dist -> main.jshtml

    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,依然能夠照常運行。node

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

配置自動打包

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 地址,而後在在瀏覽器中訪問就可看到打包以後的項目。

注意:web

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

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

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

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

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

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

配置預覽頁面

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 打包生成的輸出文件,默認放到了項目根目錄中,並且是虛擬的,看不到的
相關文章
相關標籤/搜索