webpack基礎

一，新建項目

新建一個空文件夾，如my-webpack,使用vscode打開該文件夾，執行npm init -y自動建立package.json文件。 在終端中執行npm install webpack webpack-cli -D，安裝webpack和webpack-cli。

二，Entry

entry用來指定webpack的打包入口。

1,單入口文件寫法

module.exports = {
    entry:'./src/index.js'
}
複製代碼

2,多入口寫法

module.exports = {
    entry:{
        app:'./src/index.js',
        search:'./src/search.js'
    }
}
複製代碼

三，Output

output用來告訴webpack將打包編譯後的文件輸出到哪裏。 須要引入path模塊。

const path = require('path');
module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js'
    }
}
複製代碼

四，Mode

mode用來指定當前的構建環境：development,production,none;同時會設置process.env.Node_env的值。

五，解析ES6

使用babel-loader編譯ES6語法: npm install babel-loader @babel/core -D。 同時在webpack配置文件中增長：

module:{
    rules:[
        {
            test:/\.js$/,
            use:'babel-loader'
        }
    ]
}
複製代碼

babel的配置文件是.babelrc文件:增長ES6的babel preset配置

{
    "presets":[
        "@babel/preset-env",
        "@babel/preset-react"//解析react語法
    ],
    "plugins":[
        "@babel/proposal-class-properties"//解析class語法
    ]
}
複製代碼

六，解析css

css-loader用於加載.css文件；style-loader將樣式經過<style>標籤插入到head中。

先安裝css-loader和style-loader: npm install css-loader style-loader -D

在webpack中添加配置：

module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        }
    ]
}
複製代碼

七，解析less

解析less文件須要安裝less-loader:npm install less less-loader -D

在webpack中添加配置：

module:{
    rules:[
        {
            test:/\.less$/,
            use:['style-loader','css-loader','less-loader']
        }
    ]
}
複製代碼

八，解析圖片資源

解析圖片資源須要使用url-loader:npm install url-loader -D

在webpack中添加配置：

mofule:{
    rules:[
        {
            test:/\.(png|jpg|svg|gif|jpeg)$/,
            use:[{
                loader:'url-loader',
                options:{
                    //圖片大小小於1M轉化爲base64
                    limit:10240
                }
            }]
        }
    ]
}
複製代碼

九，解析字體資源

解析字體資源須要使用file-loader: npm install file-loader -D

在webpack中添加配置：

module:{
    rules:[
        {
            test:/\.(woff|woff2|eot|ttf|otf)$/,
            use:'file-loader'
        }
    ]
}
複製代碼

十，熱更新

使用webpack-dev-server插件實現開發過程當中的代碼熱更新。WDS不刷新瀏覽器，不輸出文件，而是放在內存中，須要配合使用webpack內置的HotModuleReplacementPlugin插件。

首先安裝插件：npm install webpack-dev-server -D;

而後在webpack中添加配置：

const webpack = require('webpack');
module.exports = {
    ...
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        contentBase:'dist',
        hot:true,
        inline:true,
        port:8888
    }
}
複製代碼

最後須要在package.json文件的scripts中增長一條命令:"dev":"webpack-dev-server --open"

十一，html-webpack-plugin

html-webpack-plugin的做用：1，根據指定的頁面在內存中生成 指定的頁面；2，自動 將生成的xxx.js文件引用到頁面中去。首先安裝插件：npm install html-webpack-plugin -D。 而後修改webpack配置:

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'src/index.html'),
            filename:'index.html'
        })
    ]
}
複製代碼

至此在終端運行：npm run dev就能夠在瀏覽器中打開咱們的頁面，在代碼中修改能夠實現實時更新。