webpack學(xué)習(xí)（一）

codecraft 發(fā)布于2019-08-23 17:55 / 824人閱讀

摘要：四用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。對(duì)于圖片等都不能識(shí)別，所有需要引入對(duì)應(yīng)的對(duì)對(duì)應(yīng)格式的文件進(jìn)行轉(zhuǎn)換以便來識(shí)別。支持鏈?zhǔn)秸{(diào)用，調(diào)用順序由下到上，由右到左五插件目的在于解決無法實(shí)現(xiàn)的其他事。

一.entry

entry是webpack打包的入口配置，entry對(duì)應(yīng)的值可以是字符串，數(shù)組，對(duì)象；單入口可以使用字符串、數(shù)組、對(duì)象，多入口配置則必須使用對(duì)象的方式

二.output

output是webpack打包的出口配置，可以指定文件輸出的路徑path和文件名filename；多入口起點(diǎn)的時(shí)候，出口文件名配置需要以占位符來確保每個(gè)文件具有唯一的名稱，eg：filename="[name].js"

三.mode

模式配置告知webpack使用相應(yīng)的配置優(yōu)化，支持development，production；webpack打包的時(shí)候可以使用webpack --mode=production進(jìn)行參數(shù)傳遞。

四.loader

loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。webpack默認(rèn)只支持js，json文件格式。對(duì)于css、es6、圖片、vue、jsx等webpack都不能識(shí)別，所有需要引入對(duì)應(yīng)的loader對(duì)對(duì)應(yīng)格式的文件進(jìn)行轉(zhuǎn)換以便webpack來識(shí)別。loader支持鏈?zhǔn)秸{(diào)用，調(diào)用順序由下到上，由右到左

五.plugins

插件目的在于解決 loader 無法實(shí)現(xiàn)的其他事。

六.webpack項(xiàng)目搭建（vue）

1）npm i webpack webpack-cli -D安裝webpack依賴。
安裝完了可以對(duì)js文件進(jìn)行解析，但是卻不能解析es6，要解析es6就需要借助babel。

2）npm babel-loader @babel/core @babel/preset-env -D安裝babel對(duì)應(yīng)的依賴。
在目錄下創(chuàng)建.babelrc文件，配置preset
{
    "presets": [
        "@babel/preset-env"
    ]
}

配置babel-loader
module: {
    rules: [
        {
            test: /.js$/,
            use: "babel-loader"
        }
    ]
}

3)npm i css-loader style-loader less less-loader -D 安裝css對(duì)應(yīng)loader
{
    test：/.css$/,
    use: [
        "style-loader",
        "css-loader"
    ]
},
{
    test: /.less$/,
    use: [
        "style-loader",
        "css-loader",
        "less-loader",
    ]
} 
這個(gè)方式css和js是編譯打包到一個(gè)文件里面，css樣式以style的方式插入head中，
但是大多數(shù)情況我們是希望js和css分別獨(dú)立打包，這時(shí)我們就需要引入插件
mini-css-extract-plugin把css樣式抽離出來。

npm i mini-css-extract-plugin -D安裝插件。

在webpack.config.js引入

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

loader就不能使用style-loader需引用MiniCssExtractPlugin.loader

plugins: [
   new MiniCssExtractPlugin({
       filename: "[name].css"
    })
]

npm i optimize-css-assets-webpack-plugin -D引入css壓縮插件

const OptimizeCss = require("optimize-css-assets-webpack-plugin");

配置css壓縮plugins
new OptimizeCss({
  assetNameRegExp: /.css$/g,
  cssProcessor: require("cssnano"),
}),

4)npm i vue-loader vue-template-compiler -D安裝vue依賴loader
{
    test: /.vue$/,
    use: "vue-loader"
}

引入vue-loader plugin：

const VueLoaderPlugin = require("vue-loader/lib/plugin");
new VueLoaderPlugin(),

5)npm i html-webpack-plugin -D 安裝html的插件

const HtmlWebpackPlugin = require("html-webpack-plugin");

new HtmlWebpackPlugin({
    template: "./src/index.html",
    filename: "index.html", // 打包之后的html
    chunks: ["app"], // 依賴的文件
    inject: true,
    minify: {
        html5: true,
        removeAttributeQuotes: true,
        collapseWhitespace: true,
    }
})

6）熱更新