webpack介紹

• webpack是一個靜態模組打包工具(自動的幫我們解決依賴關係)

• 靜態資源:html css js img 等等

webpack打包js案例

1準備htmlcssjs
2前提:本地需要已經安裝好node.js
3步驟:
4npminit-y初始化專案
5npminstallwebpack-D
6npminstallwebpack-cli-D
7安裝完成後執行命令:webpack./index.js-odist

執行命令後，專案根目錄增加dist目錄，並且該目錄下有main.js。html頁面引入js檔案後，執行顯示正確效果，代表打包成功。

• 也可以修改package.json檔案進行打包，修改內容如下:

• 執行時只需要輸入命令 npm run start，即可對js檔案進行打包。效果與上一種方法一樣。

另一種打包方式:配置檔案法

 1新建檔案，命名為webpack.config.js
 2輸入程式碼:
 3constpath=require("path");
 4module.exports={
 5entry:path.join(__dirname,'./index.js'),
 6output:{
 7path:path.join(__dirname,"./dist"),
 8filename:'bundle.js'
 9}
10}
11輸入程式碼後，儲存。此處暫不執行，講到熱過載詳細介紹

打包HTML CSS 並進行熱載入

1安裝外掛
2npminstallhtml-webpack-plugin-D
3npminstallwebpack-dev-server-D
4npminstallstyle-loader-D
5npminstallcss-loader-D

 1完整配置檔案
 2constHtmlWebpackPlugin=require("html-webpack-plugin");
 3constpath=require("path");
 4module.exports={
 5entry:path.join(__dirname,'./index.js'),
 6output:{
 7path:path.join(__dirname,"./dist"
 
),
 8filename:'bundle.js'
 9},
10//打包html配置
11plugins:[
12newHtmlWebpackPlugin({
13template:path.join(__dirname,"./index.html"),
14filename:"index.html"
15})
16],
17module:{
18rules:[{
19test:/.css$/,
20use:['style-loader','css-loader']
21}]
22}
23}

修改package.json,新增如下程式碼:

"nstart":"webpack-dev-server --config webpack.config.js --hot --port 1999"

注意:如果出現報錯:Error: Cannot find module 'webpack cli/bin/config-yargs'可能是版本不相容，需要解除安裝新版本，安裝老版本

1npmuninstallwebpack-cli//解除安裝舊版本
2npminstallwebpack-cli@3.3.12-D安裝舊版本
3執行:npmrunnstart

CSS和HTML打包成功示意圖:

1熱過載執行命令:
2"nstart":"webpack-dev-server--configwebpack.config.js--hot--port1999"

• 如何判斷熱過載是否成功?

1執行命令後，控制檯無報錯資訊。瀏覽器輸入:http://localhost:1999
2修改css屬性，等待片刻，看頁面是否自動更改。

ES6轉ES5

1npminstallbabel-corebabel-loader@7.1.5babel-plugin-transform-runtimebabel-preset-envbabel-preset-stage-0-D

1修改配置檔案
2{test:/\.js/,use:['babel-loader'],exclude:/node_modules/}

1新增.babelrc檔案
2{
3"presets":["env","stage-0"],
4"plugins":["transform-runtime"]
5}

• 轉換成功示意圖:

HTML熱過載

1npminstallraw-loader-D

 1修改配置檔案
 2module:{
 3rules:[{
 4test:/.css$/,
 5use:['style-loader','css-loader']
 6},
 7{
 8test:/.(htm|html)$/,
 9use:[
10'raw-loader'
11]
12}]
13}
14執行熱載入