Webpack快速入門

webpack

什么是Webpack

顧名思義它是一個(gè)前端打包工具，通過給定的入口文件自動(dòng)梳理所有依賴資源（包括css、圖片、js等），并按照配置的規(guī)則進(jìn)行一系列處理（轉(zhuǎn)es5、壓縮等），打包生成適合現(xiàn)代生產(chǎn)環(huán)境要求的文件。同時(shí)也借此豎起技術(shù)壁壘，防止后端改代碼[滑稽]。

npm基本操作

現(xiàn)今前端體系構(gòu)建在node之上，npm是node的包管理器。webpack、babel等只是工具包，都通過npm安裝。

初始化新項(xiàng)目
npm init
全局安裝依賴包PACKAGE，不屬于具體哪個(gè)項(xiàng)目
npm install --global PACKAGE
安裝運(yùn)行時(shí)依賴包PACKAGE，會(huì)打包至最終生成文件
npm install --save PACKAGE
安裝開發(fā)時(shí)依賴包PACKAGE，不會(huì)出現(xiàn)在生成文件中。webpack就屬于開發(fā)時(shí)用來打包文件，在運(yùn)行時(shí)就不需要它了。
npm install --save-dev PACKAGE
執(zhí)行命令，具體命令配置在package.json中
npm run COMMAND
同時(shí)以上安裝依賴命令也有簡(jiǎn)寫模式
npm i -g PACKAGE
npm i -S PACKAGE
npm i -D PACKAGE

編寫源碼

創(chuàng)建并進(jìn)入項(xiàng)目文件夾

mkdir packme
cd packme

初始化項(xiàng)目

npm init
//之后根據(jù)提示輸入或默認(rèn)即可。

創(chuàng)建目錄app存放源文件

mkdir app

編寫源代碼

//Anim.js
class Anim {
    constructor(name = 'unnamed') {
        this.name = name;
    }

    speak() {
        return `hey, i am ${this.name}`;
    }
}

export default Anim;

//Sheep.js
import Anim from './Anim.js'
class Sheep extends Anim {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
}

export default Sheep;

//index.js
import Sheep from './Sheep.js';
import base from './base.css';
import index from './index.css';

let sheep = new Sheep('doly', 1);
let target = document.getElementById('logs');
target.innerHTML = sheep.speak();

/*base.css*/
html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

/*index.css*/
#logs {
    border: 1px solid #ccc;
    height: 80px;
    overflow: auto;
}

<!-- index.tpl.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="logs"></div>
</body>

</html>

整體項(xiàng)目目錄如圖所示

構(gòu)建目標(biāo)

源碼編寫好了，梳理一下我們的構(gòu)建目標(biāo)。

js使用了es6，需要轉(zhuǎn)換成es5
js合并到一個(gè)文件
壓縮js
css合并到一個(gè)文件
壓縮css

開始構(gòu)建

安裝依賴包

//webpack 負(fù)責(zé)整個(gè)流程
npm i -D webpack
//babel 負(fù)責(zé)es6轉(zhuǎn)換
npm i -D babel-core babel-cli babel-loader babel-preset-es2015
//壓縮js
npm i -D terser-webpack-plugin
//抽取處理過的css到單獨(dú)文件（默認(rèn)css會(huì)被當(dāng)作模塊引入js中）
npm i -D mini-css-extract-plugin
//壓縮css
npm i -D optimize-css-assets-webpack-plugin
//將打包后的js、css插入指定html
npm i -D html-webpack-plugin

創(chuàng)建webpack配置文件

//webpack.config.js
//配置文件本身是js，它交給node執(zhí)行。所以可以使用模塊語法、特殊變量等特性。

//聲明引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJsPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    mode: 'production',//production默認(rèn)會(huì)壓縮代碼，development則不會(huì)。
    devtool: 'cheap-module-source-map',//控制生成sourceMap的方式
    entry: __dirname + '/app/index.js',//入口文件，多個(gè)入口可以對(duì)象kv方式傳入
    output: {
        path: __dirname + '/build',
        filename: 'bundle-[contenthash:8].js'
    },
    optimization: {
        minimizer: [ //配置js、css壓縮器
            new TerserJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true
            }),
            new OptimizeCssAssetsPlugin()
        ]
    },
    module: {//配置不同文件的處理規(guī)則，
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {//指定babel使用的參數(shù)
                    presets: ['es2015']
                }
            },
            {
                test: /\.css$/,
                use: [//多個(gè)處理器從后往前調(diào)用，先預(yù)處理好css再抽取到文件
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [//配置處理插件
        new HtmlWebpackPlugin({//根據(jù)指定模板生成html,包含打包的后js、css
            template: __dirname + '/app/index.tpl.html',
            minify: {
                minimize: true,
                collapseWhitespace: true,
                minifyCSS: true,
                minifyJS: true
            }
        }),
        new MiniCssExtractPlugin({//合并的css文件配置
            filename: 'style-[contenthash:8].css',
            ignoreOrder: false
        })
    ],
    devServer: {//開發(fā)服務(wù)器，便于瀏覽器測(cè)試訪問
        contentBase: './build',
        port: 8090,
        historyApiFallback: true,
        inline: true
    }
}

添加構(gòu)建命令

//package.json
//修改scripts配置，加入相關(guān)命令
    "scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server"
    },

執(zhí)行構(gòu)建

//開啟本地服務(wù)器，只用一次
npm run dev
//執(zhí)行webpack構(gòu)建
npm run build

構(gòu)建結(jié)束，在build目錄下生成新文件

posted @ 2019-08-29 15:13 超軟毛毛蟲閱讀(590) 評(píng)論(0) 收藏舉報(bào)

刷新頁面返回頂部

Webpack快速入門

公告