webpack打包js文件

本文轉載自查看原文 2019-06-05 21:34 2147

當輸入 webpack 輸入指令 npm run dev 后會自動啟動一個瀏覽器

需要借鑒插件 open-browser-webpack-plugin

下載：npm install open-browser-webpack-plugin

我們做一個小案例實現的功能有：

啟動熱鍵，會自動彈出瀏覽器窗口

改變瀏覽器端口

打包css文件

打包json文件

打包img(圖片)文件

實現es6

首先下載webpack 和webpack -dev-servaer 輕量級服務器

在下載啟動熱鍵自動打開瀏覽器窗口的插件：

npm i open-drowser-webpack-plugin：沒有版本號因為這個插件是兩年以前的

這些文件都是開發環境下的，並且可以在 package.json 這個文件夾看到

下面開始配置文件

文件名必須是 webpack.config.js

Path 獲取當前絕對路徑

Path.resolve 將路徑或路徑片段的序列解析為絕對路徑

Dirname 當前絕對路徑

DevServer 配置服務

var path=require("path");//比如項目寫完要拷貝給別人，但不能保證別人的絕對地址和自己一樣，這個是保持一致
var OpenBrowserPlugin = require('open-browser-webpack-plugin');//啟動 npm run dev 然后自動打開瀏覽器對應端口

module.exports={
    entry:"./static/index.js",//主文件入口，
    output:{
        filename:"bundle.js",//打包后的文件名
        path:path.resolve(__dirname,"./dist"),                 
        //打包后文件名的路徑，因為打包后最后要考給別人的，最好用絕對路徑，但是別人的路徑不一定給你路徑是一樣的所以要借鑒一個方法path
        //無論在路徑，獲取的都是絕對路徑
    },
    plugins:[
        new OpenBrowserPlugin({ url: 'http://localhost:8080' })
    ]
    
}