webpack學習（一）

codecraft 發布于2019-08-23 17:55 / 834人閱讀

摘要：四用于對模塊的源代碼進行轉換。對于圖片等都不能識別，所有需要引入對應的對對應格式的文件進行轉換以便來識別。支持鏈式調用，調用順序由下到上，由右到左五插件目的在于解決無法實現的其他事。

一.entry

entry是webpack打包的入口配置，entry對應的值可以是字符串，數組，對象；單入口可以使用字符串、數組、對象，多入口配置則必須使用對象的方式

二.output

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

三.mode

模式配置告知webpack使用相應的配置優化，支持development，production；webpack打包的時候可以使用webpack --mode=production進行參數傳遞。

四.loader

loader 用于對模塊的源代碼進行轉換。webpack默認只支持js，json文件格式。對于css、es6、圖片、vue、jsx等webpack都不能識別，所有需要引入對應的loader對對應格式的文件進行轉換以便webpack來識別。loader支持鏈式調用，調用順序由下到上，由右到左

五.plugins

插件目的在于解決 loader 無法實現的其他事。

六.webpack項目搭建（vue）

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

2）npm babel-loader @babel/core @babel/preset-env -D安裝babel對應的依賴。
在目錄下創建.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對應loader
{
    test：/.css$/,
    use: [
        "style-loader",
        "css-loader"
    ]
},
{
    test: /.less$/,
    use: [
        "style-loader",
        "css-loader",
        "less-loader",
    ]
} 
這個方式css和js是編譯打包到一個文件里面，css樣式以style的方式插入head中，
但是大多數情況我們是希望js和css分別獨立打包，這時我們就需要引入插件
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）熱更新

GPU云服務器云服務器學習筆記一深度學習一深度學習一篇深度學習一天

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104355.html

webpack入門學習手記（一）

摘要：爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續相關文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四本人微信公眾號：前端修煉之路，歡迎關注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt，但是一直沒有學習過webpack。這兩天剛好有時間，學習了下...

mengera88 2019-08-23 14:01 評論0 收藏0
webpack 學習筆記（一）

摘要：引言最近在學習，發現好多知識點，之前一點都沒有接觸過，如等等。使用本地安裝，會存于文件夾內與屬性內，更方便項目文件遷移以及協同開發等情況。引言最近在學習webpack，發現好多知識點，之前一點都沒有接觸過，如babel、core-js、browserslist等等。以前習慣了使用cli構建項目，很多東西不用考慮，拿來就用，這樣的碼農是不會有能力提升的，必須了解更多的知識點，才能成為...

zhangwang 2019-08-26 10:36 評論0 收藏0
我的webpack學習筆記（一）

摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過打包。前言在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 評論0 收藏0
我的webpack學習筆記（一）

摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過打包。前言在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

CrazyCodes 2019-08-29 12:54 評論0 收藏0
webpack入門學習手記（二）

摘要：例如現在的入門學習手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學習手記一，主要是介紹了的核心概念，是整個學習過程的基礎知識。新生成的類似如下入門學習手記因為生成的內容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號：前端修煉之路，歡迎關注。最近開始想要維護一個個人的公眾...

Joyven 2019-08-23 14:05 評論0 收藏0