webpack打包js文件

當輸入 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' })
    ]
    
}

在自動啓動服務器時候 webpack-dev-server 把當前目錄看成根目錄

若是你的8080端口已經被佔了，怎麼改其它端口

 

 打包css文件

首先下載 style-loader css-loader 這兩個文件

 下載：npm i --save-dev style-loader css-loader

打包json文件

如何解析json 

由於能夠json是js文件因此能夠直接編譯json，但也要解析

 

 下載：npm i --save-dev json-loader

 

 打包img文件

下載：兩種下載方法

　　npm i --save-dev url-loader

　　Npm I --save-dev file-loader  這個是改文件名的

　　咱們使用的圖片最大是8kb

 

　處理es6 js文件

　　須要學習 babel 這個babel模塊 專門將es6語法解析成es5的格式

　　npm i --save-dev babel-loader @babel/core @babel/preset webpack

 

es6寫法：

而後我們經過下載包把es6轉換爲es5，能夠看到我們用這個依靠包成功把打包後的文件轉換成了es5了。

 

 

 

做者：晉飛翔

手機號(微信同步)：17812718961