webpack教程(二)

目錄

1. 配置css-loader
2. 配置less-loader
3. 配置url-loader
4. 配置壓縮外掛
5. 配置html外掛
6. 配置dev-server
7. 配置熱更新
8. 配置跨域

準備工作

1. 建立webpackdemo資料夾
2. 啟動cmd, 進入webpackdemo目錄,執行npm init初始化package.json
3. 建立app.css檔案和app.less檔案

// app.css
body {
    background: #EEEEEE;
}

// app.less
.box {
    width: 600px;
    margin: 10px auto;
    img {
        width: 600px;
    }
    p {
        text-align: center;
    }
}

1. 建立入口檔案main.js

require(`./app.css`);

1. 建立webpack.config.js

const path = require(`path`);
module.exports = {
    entry: `./main.js`,
    output: {
        path: path.resolve(__dirname, `dist`),
        filename: `index.js`
    },
        mode: `development`
}

1. 測試打包是否成功

配置css-loader

1. 在webpack.config.js里加上下面的程式碼

module: {
        rules: [
            {
                test:/.css$/,
                use: [`style-loader`, `css-loader`]
            }
        ]
     }

1. 安裝style-loader和css-loader

npm i style-loader css-loader --save-dev

1. 在main.js里加上以下程式碼:

require(`./app.css`)

1. 執行 webpack 命令
2. 檢查配置是否成功
   在dist目錄建立index.html,把打包後的index.js檔案進行載入,開啟index.html,若背景是灰色說明成功

配置less-loader

1. 在module的rules裡面加上以下程式碼

{
    test: /.less$/,
    use: [`style-loader`, `css-loader`, `less-loader`]
}

1. 安裝less和less-loader

npm i less --save-dev
npm i less-loader --save-dev

1. 在main.js加入以下程式碼

require(`./app.less`);

1. 檢查配置是否成功
   在dist的index.html里加入下面的程式碼

<div class="box">
    <p>測試less-loader</p>
    <img src="../img.png"/>
</div>

開啟index.html檢查app.less裡的樣式是否生效

配置url-loader

1. 在webapck.config.js的module裡的rules物件里加上下面的程式碼

{
    test: /.(png|jpg|gif)$/,
    use: [{
        loader: `url-loader`,
        options: {
            limit: 8192
        }
    }]
}

1. 安裝file-loader和url-loader

npm i file-loader url-loader --save-dev

1. 在main.js里加上下面的程式碼

let img = document.createElement(`img`);
img.src = require(`./img.png`);
document.body.appendChild(img);

1. 執行webpack命令,開啟dist裡面的index.html檢視是否增加了一張圖片

配置壓縮外掛和html外掛

1. 在webpack配置檔案的開頭加入以下程式碼:

// 生成html的外掛
const htmlWebpackPlugin = require(`html-webpack-plugin`);
// 壓縮的外掛
const uglifyjsWebpackPlugin = require(`uglifyjs-webpack-plugin`);

在module後面新增以下程式碼:

plugins: [
    new htmlWebpackPlugin(),
    new uglifyjsWebpackPlugin()
]

1. 安裝htmlWebpackPlugin和uglifyjsWebpackPlugin外掛,同時還需要區域性安裝webpack

npm i webpack html-webpack-plugin uglifyjs-webpack-plugin --save-dev

1. 執行打包命令 webpack,開啟dist裡面的index.html和index.js檢查配置是否成功

配置dev-server

1. 在webpack配置檔案加上以下程式碼

devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000
}

1. 安裝webpack-dev-server 和webpack-cli

npm i webpack-dev-server webpack-cli --save-dev

1. 在package.json的scripts裡面加上下面這一句

"dev": "webpack-dev-server --open --oneline"

1. 執行npm run dev 檢查配置是否成功

配置熱模組替換(熱更新)

1. 在webpack配置檔案的開頭加上

const webpack = require(`webpack`);

在plugins里加上

new webpack.HotModuleReplacementPlugin()
``
在devServer加上

hot: true

2. 執行npm run dev檢查控制檯是否有列印以下資訊

[WDS] Hot Module Replacement enabled.

有則表示熱更新已開啟

#### 配置webpack跨域
1. 在webpack的devServer物件里加上

proxy: {
`/v4`: {
target: `https://m.maizuo.com`,
// 允許跨域
changeOrigin: true,
pathRewrite: {
`^/v4`: `/v4`
}
}
}

2. 在main.js里加上

// 測試跨域請求
const $ = require(`jquery`);

let url = `/v4/api/film/now-playing?__t=1535683702386&page=1&count=5`;
$.ajax({
type:”get”,
url,
success: (res)=> {
console.log(res)
},
error: ()=> {
alert(`請求失敗`);
}
});

3. 安裝jquery

npm i jquery –save-dev

4. 執行npm run dev
看是否拿到了伺服器的資料