webpack一文了解

快速的帶各位同學(xué)入門這款自動(dòng)化工具，看完之后你就懂了，你就真的懂了

一定要看看我粘貼的代碼，注釋都在里面寫著呢，如果你是在那啥，就直接看看注釋就行了也沒問題

既然能看到這篇文章，你應(yīng)該明白了一些webpack的基礎(chǔ)了吧，我就直接開始寫了

安裝

我們的第一步就是安裝webpack了，首先新建一個(gè)目錄進(jìn)去

npm init
// 或者使用yarn
yarn init

然后我們

npm i -D webpack webpack-cli
// 或者使用yarn
yarn add -D webpack webpack-cli

最后我們就可以使用如下命令查看webpack版本了,如果安裝上了的話

npx webpack -v

其實(shí)說webpack就完全在說loader一樣，webpack必須使用loader才能工作，沒有l(wèi)oader的webpack什么都做不了

在此之前我們?cè)侔惭b一下webpack的靜態(tài)服務(wù)器吧

npm i -D webpack-dev-server

這個(gè)東西跟webpack是一個(gè)家族的，所以配置的時(shí)候直接再webpack的配置文件中寫就行了

配置

文件根目錄新建一個(gè)webpack.config.js文件，這是一基本內(nèi)容

// 這就是一個(gè)js文件，所以直接使用js的語法就行了，不要以為這是個(gè)啥啥啥

for (let i = 0; i < 10000; i++) {
    // 我在這里寫個(gè)for循環(huán)都沒有問題，你明白吧
    console.log(i);
}

module.exports = {

}

配置package.json scripts

然后我們鍵入這些內(nèi)容之后，我們直接運(yùn)行一下webpack看看吧，在這之前我們配置一下package.json文件，因?yàn)榉奖惆?br>

新增字段

我們?nèi)バ略鲆粋€(gè)scirpts字段里面寫上如上代碼，然后我們就可以運(yùn)行webpack看看了

npm run build
// yarn
yarn build

基本配置

不出意外的話，應(yīng)該是執(zhí)行完for循環(huán)之后就報(bào)錯(cuò)了，你明白吧，那么現(xiàn)在我們需要配置webpack了

const path = require("path")


module.exports = {
    // 可選的production 對(duì)應(yīng)生成環(huán)境    指定這個(gè)東西后面可以有對(duì)應(yīng)的插件進(jìn)行判斷mode優(yōu)化
    // 比如說再production環(huán)境就需要去進(jìn)行代碼的壓縮啊，圖片的合并之類的，但生產(chǎn)環(huán)境只要打包資源就行了
    mode: "development",  // 開發(fā)環(huán)境
    // 入口文件，webpack打包必須需要的入口文件，所有的資源都是再入口文件引入然后webpack進(jìn)行跟蹤資源打包的
    // 后面你就懂了
    entry:"./src/main.js",
    output:{
        // 這是一個(gè)絕對(duì)路徑，所以我們需要使用nodejs自帶的模塊path進(jìn)行完成了
        // 代表打包到dist目錄下
        path:path.resolve(__dirname,"dist"),
        // 入口文件以及里面引入的所有js代碼都會(huì)被打包到一個(gè)文件
        // 這個(gè)字段可以為這個(gè)文件取一個(gè)名字，你沒寫這個(gè)字段我也不知道會(huì)發(fā)生些什么
        filename:"all.js",
        // 打包之后的html文件內(nèi)加載資源的相對(duì)路徑
        publicPath:"/assets/"
    }
}

你把這上面的一寫，然后在新建一個(gè)src目錄并新建一個(gè)main.js文件，然后我們隨便寫一點(diǎn)內(nèi)容都行啊，然后就直接開始打包吧，比如說我這里main.js這樣寫的

for(let i=0;i<10000;i++){

}
console.log("作死完成");

然后我們直接開始打包吧

npm run build

跑起來，我們就會(huì)發(fā)現(xiàn)webpack已經(jīng)幫我們打包好了，那么這就是我現(xiàn)在的目錄結(jié)構(gòu)了


文件

然后你會(huì)發(fā)現(xiàn)打包之后的文件咱也看不懂，咱也不敢問，老老實(shí)實(shí)學(xué)怎么用就行了吧，管他底層怎么實(shí)現(xiàn)的，然后我們先跑一下打包之后的文件試試能不能運(yùn)行吧

cd dist
node all.js
done

然后這就完成了，因?yàn)檫@就是一個(gè)完整的打包流程了，之后就是加上各種loader啊插件啊讓在打包的過程中給他轉(zhuǎn)換語法啊加前綴啊合并啊壓縮啊混肴啊等等等等，你明白吧

babel-loader 轉(zhuǎn)換語法

首先說說第一個(gè)loader，就是webpack跟babel協(xié)作轉(zhuǎn)換語法并打包的loader
那么首先我們需要安裝如下工具

npm i -D @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime babel-loader
// 然后安裝polyfill
npm i @babel/polyfill

然后我們就開始配置我們的第一個(gè)loader吧，首先因?yàn)槭褂昧薭abel我們需要在main.js中寫一下高級(jí)語法

class Person {
    constructor(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    sayHello() {
        console.log("hello iam" + this.name + "  " + this.age + "   " + this.sex);
    }
}

new Person("suiyue",10,"男").sayHello();

然后我們開始配置loader了

const path = require("path")


module.exports = {
    // 可選的production 對(duì)應(yīng)生成環(huán)境    指定這個(gè)東西后面可以有對(duì)應(yīng)的插件進(jìn)行判斷mode優(yōu)化
    // 比如說再production環(huán)境就需要去進(jìn)行代碼的壓縮啊，圖片的合并之類的，但生產(chǎn)環(huán)境只要打包資源就行了
    mode: "development",  // 開發(fā)環(huán)境
    // 入口文件，webpack打包必須需要的入口文件，所有的資源都是再入口文件引入然后webpack進(jìn)行跟蹤資源打包的
    // 后面你就懂了
    entry:"./src/main.js",
    output:{
        // 這是一個(gè)絕對(duì)路徑，所以我們需要使用nodejs自帶的模塊path進(jìn)行完成了
        // 代表打包到dist目錄下
        path:path.resolve(__dirname,"dist"),
        // 入口文件以及里面引入的所有js代碼都會(huì)被打包到一個(gè)文件
        // 這個(gè)字段可以為這個(gè)文件取一個(gè)名字，你沒寫這個(gè)字段我也不知道會(huì)發(fā)生些什么
        filename:"all.js",
        // 打包之后的html文件內(nèi)加載資源的相對(duì)路徑
        publicPath:"/assets/"
    },

    // 模塊
    module:{
        // 規(guī)則
        rules:[
            {
                // 正則表達(dá)式匹配entry指定的js文件中使用import或者require引入的文件
                // 這里匹配的是引入文件后綴名為.js的文件
                test:/\.js$/,
                use:{
                    // 指定要處理的loader
                    loader:"babel-loader",
                    // 可以給這個(gè)loader傳遞一些參數(shù)
                    // 在這里就相當(dāng)于babel.config.js
                    options:{
                        presets:["@babel/preset-env"],
                        plugins:["@babel/plugin-transform-runtime"]
                    }
                }
            }
        ]
    }
}

然后我們直接yarn build看看效果吧，然后你就會(huì)發(fā)現(xiàn)打包出來的all.js還是看不懂，。。。。
這需要明白一點(diǎn)就行了，我們不是寫了一個(gè)Person類嗎，我們就去all.js搜索這個(gè)類看看語法不就行了嗎？

我是圖片

我覺得當(dāng)我把這張圖片放在這里的時(shí)候，你應(yīng)該已經(jīng)懂了，這一看就知道是function``function構(gòu)造器

然后因?yàn)榻酉聛硖幚淼馁Y源需要一個(gè)完整的頁面環(huán)境了，所以我們需要新建一個(gè)html頁面了

image.png

這就是我目前的目錄結(jié)構(gòu)了，這時(shí)候我們需要提到一個(gè)插件了，對(duì)就是一個(gè)插件了

  • html-webpack-plugin --> 打包html文件

這個(gè)插件的作用就非常強(qiáng)大了，你知道吧，我們打包文件之后那么我們就需要在index.html文件中手動(dòng)引入這些打包之后的資源了，你能忍嗎？并且webpack還默認(rèn)不會(huì)幫我們打包這個(gè)index.html文件
（搜索entry指定的js文件然后繼續(xù)追尋對(duì)應(yīng)的import或者required的js文件打包到一起）
所以說你總不可能告訴我你要 import "index.html"吧，這明顯不科學(xué)啊，所以我們特別特別特別需要這款插件

npm i -D html-webpack-plugin

稍微改動(dòng)了一下output選項(xiàng)下的js輸出路徑

const path = require("path")

// 命名盡量首字母大寫
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    // 可選的production 對(duì)應(yīng)生成環(huán)境    指定這個(gè)東西后面可以有對(duì)應(yīng)的插件進(jìn)行判斷mode優(yōu)化
    // 比如說再production環(huán)境就需要去進(jìn)行代碼的壓縮啊，圖片的合并之類的，但生產(chǎn)環(huán)境只要打包資源就行了
    mode: "development",  // 開發(fā)環(huán)境


    // 入口文件，webpack打包必須需要的入口文件，所有的資源都是再入口文件引入然后webpack進(jìn)行跟蹤資源打包的
    // 后面你就懂了
    entry:"./src/main.js",



    output:{
        // 這是一個(gè)絕對(duì)路徑，所以我們需要使用nodejs自帶的模塊path進(jìn)行完成了
        // 代表打包到dist目錄下
        path:path.resolve(__dirname,"dist"),
        // 入口文件以及里面引入的所有js代碼都會(huì)被打包到一個(gè)文件
        // 這個(gè)字段可以為這個(gè)文件取一個(gè)名字，你沒寫這個(gè)字段我也不知道會(huì)發(fā)生些什么
        filename:"js/all.js",
        // 打包之后的html文件內(nèi)加載資源的相對(duì)路徑
        publicPath:"/assets/"
    },




    // 模塊
    module:{
        // 規(guī)則
        rules:[
            {
                // 正則表達(dá)式匹配entry指定的js文件中使用import或者require引入的文件
                // 這里匹配的是引入文件后綴名為.js的文件
                test:/\.js$/,
                use:{
                    // 指定要處理的loader
                    loader:"babel-loader",
                    // 可以給這個(gè)loader傳遞一些參數(shù)
                    // 在這里就相當(dāng)于babel.config.js
                    options:{
                        presets:["@babel/preset-env"],
                        plugins:["@babel/plugin-transform-runtime"]
                    }
                },
                // 一定要配置這個(gè)exclude選項(xiàng),禁止babel去轉(zhuǎn)換node_modules模塊下的代碼
                // 不然就是一大堆奇奇怪怪的錯(cuò)誤
                exclude:/node_modules/
            }
        ]
    },

    // 所有插件都必須在plugins中new出來，這是一個(gè)數(shù)組
    plugins:[
        new HtmlWebpackPlugin({
            // 指定需要打包的html文件
            template:"public/index.html",
            // 輸出的文件
            filename:"index.html"
        })
    ]
}

然后我們就可以在dist目錄下看見我們的index.html是這樣的了

圖片

他就會(huì)自動(dòng)引入所需要的css或者js等文件，因?yàn)槟壳斑€沒有css文件所以就是這種情況，為什么是assets呢，是因?yàn)槲覀冊(cè)趏utput的publicPath指定的就是這個(gè)啊

  • webpack-dev-server配置

既然有了html了，我們就快速配置一下webpack-dev-server吧，這樣的話能夠熱更新式的刷新頁面了，在webpack配置文件中新增

image.png

然后我們就可以使用npm run dev看看效果了,你就會(huì)發(fā)現(xiàn)webpack已經(jīng)開始使用http協(xié)議進(jìn)行訪問并且在編輯器里面實(shí)時(shí)更新代碼瀏覽器也會(huì)實(shí)時(shí)刷新的，這就是體驗(yàn)了

  • css預(yù)處理器loader --> less-loader

關(guān)于less-loader就是用來打包less文件的，我們首先安裝loader和其需要的依賴

npm i -D less-loader less css-loader mini-css-extract-plugin postcss-loader autoprefixer

這里我們需要通過css-loader將less-loader轉(zhuǎn)換后的css代碼處理一下，然后我們通過postcss-loader+autoprefixer給css的一些語法進(jìn)行加前綴然后我們通過mini-css-extract-plugin插件導(dǎo)出為一個(gè)單獨(dú)的css文件，同樣的大家也可以使用style-loader給處理之后的css直接加載在對(duì)應(yīng)標(biāo)簽的style屬性上，但是我覺得還是到處為一個(gè)單獨(dú)的css文件然后通過上面的html-webpack-plugin引入好一點(diǎn)，這里憑大家的愛好吧

大家一定要仔細(xì)看我的注釋了哦，這次的loader什么的有點(diǎn)多都是用來操作css的，我們先配置出來然后在去寫對(duì)應(yīng)的less文件測(cè)試

const path = require("path")

// 到處html文件插件
const HtmlWebpackPlugin = require("html-webpack-plugin")

// 導(dǎo)出css樣式插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")



module.exports = {
    // 可選的production 對(duì)應(yīng)生成環(huán)境    指定這個(gè)東西后面可以有對(duì)應(yīng)的插件進(jìn)行判斷mode優(yōu)化
    // 比如說再production環(huán)境就需要去進(jìn)行代碼的壓縮啊，圖片的合并之類的，但生產(chǎn)環(huán)境只要打包資源就行了
    mode: "development",  // 開發(fā)環(huán)境


    // 入口文件，webpack打包必須需要的入口文件，所有的資源都是再入口文件引入然后webpack進(jìn)行跟蹤資源打包的
    // 后面你就懂了
    entry: "./src/main.js",



    output: {
        // 這是一個(gè)絕對(duì)路徑，所以我們需要使用nodejs自帶的模塊path進(jìn)行完成了
        // 代表打包到dist目錄下
        path: path.resolve(__dirname, "dist"),
        // 入口文件以及里面引入的所有js代碼都會(huì)被打包到一個(gè)文件
        // 這個(gè)字段可以為這個(gè)文件取一個(gè)名字，你沒寫這個(gè)字段我也不知道會(huì)發(fā)生些什么
        filename: "js/all.js",
        // 打包之后的html文件內(nèi)加載資源的相對(duì)路徑
        publicPath: "/assets/"
    },




    // 模塊
    module: {
        // 規(guī)則
        rules: [
            {
                test: /\.less$/,
                // 需要使用多個(gè)loader的時(shí)候use可以是一個(gè)數(shù)組了
                /* 
                    loader默認(rèn)是從下到上處理對(duì)應(yīng)的文件的
                    所以這里就是先使用less轉(zhuǎn)換語法
                    然后通過postcss-loader給css代碼自動(dòng)加前綴
                    然后使用css-loader處理css代碼
                    最后可以使用style-loader直接加載到對(duì)應(yīng)標(biāo)簽的style屬性上
                    我這里使用的是mini-css-extract-plugin到處為一個(gè)單獨(dú)的css文件
                 */
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            //  通過postcss-loader的autoprefixer插件自動(dòng)給需要兼容的css樣式加前綴
                            plugins: [require("autoprefixer")]
                        }
                    },
                    "less-loader"
                ]
            },
            {
                // 正則表達(dá)式匹配entry指定的js文件中使用import或者require引入的文件
                // 這里匹配的是引入文件后綴名為.js的文件
                test: /\.js$/,
                use: {
                    // 指定要處理的loader
                    loader: "babel-loader",
                    // 可以給這個(gè)loader傳遞一些參數(shù)
                    // 在這里就相當(dāng)于babel.config.js
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: ["@babel/plugin-transform-runtime"]
                    }
                },
                // 一定要配置這個(gè)exclude選項(xiàng),禁止babel去轉(zhuǎn)換node_modules模塊下的代碼
                // 不然就是一大堆奇奇怪怪的錯(cuò)誤
                exclude: /node_modules/
            }
        ]
    },

    // 所有插件都必須在plugins中new出來
    plugins: [
        new HtmlWebpackPlugin({
            // 指定需要打包的html文件
            template: "public/index.html",
            // 輸出的文件
            filename: "index.html"
        }),
        new MiniCssExtractPlugin({
            // 會(huì)將所有的樣式文件也合并到一個(gè)，這里需要指定一下對(duì)應(yīng)樣式文件的名稱
            filename: "css/[name].css",
        })
    ],

    // 這是webpack-dev-server的配置
    devServer: {
        // 綁定端口3000
        port: 3000,
        // 自動(dòng)打開瀏覽器到指定網(wǎng)頁
        open: true,
        // 熱更新
        hot: true,
        // 代表網(wǎng)站根目錄那樣的，主目錄是哪里
        // 這里是dist，所以會(huì)自動(dòng)加載已經(jīng)打包好的文件
        // 直接填你output中的path就行了
        contentBase: "dist"
    }
}

然后我們可以在src目錄下新建一個(gè)less目錄，隨便寫點(diǎn)什么，這是我的目錄結(jié)構(gòu)

結(jié)構(gòu)

使用npm run build打包出來就是這樣的

關(guān)于打包c(diǎn)ss文件


image.png

然后說說當(dāng)我們使用第三方框架的時(shí)候需要導(dǎo)入一些字體文件或者svg等圖標(biāo)文件是怎么導(dǎo)入的呢？

  • url-loader & file-loader --> 導(dǎo)入字體文件，圖片文件

首先我們需要安裝這個(gè)loader

npm i -D url-loader file-loader

然后我們需要在rules中添加兩個(gè)規(guī)則

            {
                test:/\.(woff|woff2|ttf|eot|svg)$/,
                loader:"url-loader"
            },
            {
                // 忽略大小寫
                test:/\.(png|jpe?g|gif)$/i,
                use:{
                    loader:"url-loader",
                    options:{
                        // 小于8kb的圖片將被轉(zhuǎn)換成dataurl格式
                        limit:8192
                    }
                }
            },

  • clean-webpack-plugin

這個(gè)插件有什么用呢？可以在打包之前刪除一些文件，這就非常方便了，我們正好需要在打包之前刪除dist目錄下的所有的文件和目錄然后讓他重新生成出來

npm install --save-dev clean-webpack-plugin

然后我們就需要使用這個(gè)插件了，非常簡(jiǎn)單的，最上面引入這個(gè)插件

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

然后直接在plugins中new出來

// 會(huì)默認(rèn)尋找你webpack配置文件中output.path目錄然后清空
new CleanWebpackPlugin()

結(jié)束，就是這么easy

那么關(guān)于一個(gè)項(xiàng)目中需要用到的loader基本上已經(jīng)介紹完成了，然后大家可以根據(jù)不同的項(xiàng)目配置不同的loder進(jìn)行使用，比如說react中需要配置jsx語法后綴的loader，vue中需要配置vue后綴的文件loader，這里我不是很熟悉react，我放一下vue的webpack自己手動(dòng)的配置吧

配置vue的開發(fā)環(huán)境需要這三個(gè)依賴

npm install -D vue-loader vue-template-compiler vue-style-loader

我這里直接就發(fā)配置完成之后的代碼了

const path = require("path")

// 到處html文件插件
const HtmlWebpackPlugin = require("html-webpack-plugin")

// 導(dǎo)出css樣式插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    // 可選的production 對(duì)應(yīng)生成環(huán)境    指定這個(gè)東西后面可以有對(duì)應(yīng)的插件進(jìn)行判斷mode優(yōu)化
    // 比如說再production環(huán)境就需要去進(jìn)行代碼的壓縮啊，圖片的合并之類的，但生產(chǎn)環(huán)境只要打包資源就行了
    mode: "development",  // 開發(fā)環(huán)境


    // 入口文件，webpack打包必須需要的入口文件，所有的資源都是再入口文件引入然后webpack進(jìn)行跟蹤資源打包的
    // 后面你就懂了
    entry: "./src/main.js",



    output: {
        // 這是一個(gè)絕對(duì)路徑，所以我們需要使用nodejs自帶的模塊path進(jìn)行完成了
        // 代表打包到dist目錄下
        path: path.resolve(__dirname, "dist"),
        // 入口文件以及里面引入的所有js代碼都會(huì)被打包到一個(gè)文件
        // 這個(gè)字段可以為這個(gè)文件取一個(gè)名字，你沒寫這個(gè)字段我也不知道會(huì)發(fā)生些什么
        filename: "js/all.js",
        // 打包之后的html文件內(nèi)加載資源的相對(duì)路徑
        // 注釋掉這個(gè)惡心的選項(xiàng)
        //publicPath: "/assets/"
    },




    // 模塊
    module: {
        // 規(guī)則
        rules: [
            {
                test:/\.(woff|woff2|ttf|eot|svg)$/,
                loader:"url-loader"
            },
            {
                // 忽略大小寫
                test:/\.(png|jpe?g|gif)$/i,
                use:{
                    loader:"url-loader",
                    options:{
                        // 小于8kb的圖片將被轉(zhuǎn)換成dataurl格式
                        limit:8192
                    }
                }
            },
            {
                test: /\.less$/,
                // 需要使用多個(gè)loader的時(shí)候use可以是一個(gè)數(shù)組了
                /* 
                    loader默認(rèn)是從下到上處理對(duì)應(yīng)的文件的
                    所以這里就是先使用less轉(zhuǎn)換語法
                    然后通過postcss-loader給css代碼自動(dòng)加前綴
                    然后使用css-loader處理css代碼
                    最后可以使用style-loader直接加載到對(duì)應(yīng)標(biāo)簽的style屬性上
                    我這里使用的是mini-css-extract-plugin到處為一個(gè)單獨(dú)的css文件
                 */
                use: [
                    // 默認(rèn)vue中的樣式是需要直接由vue-style-loader進(jìn)行處理的，但是
                    // 這個(gè)loader是直接加上行內(nèi)的，并不會(huì)導(dǎo)出為一個(gè)單獨(dú)的CSS文件
                    // 所以這里使用了vue-loader官方文檔提供的一種方法結(jié)合MiniCssExtractPlugin的loader
                    // 到處vue文件中的樣式
                    process.env.NODE_ENV !== "production"?"vue-style-loader":MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            //  通過postcss-loader的autoprefixer插件自動(dòng)給需要兼容的css樣式加前綴
                            plugins: [require("autoprefixer")]
                        }
                    },
                    "less-loader"
                ]
            },
            {
                test: /\.css$/,
                use: [
                    // 同時(shí)這也意味著無法處理js文件中導(dǎo)入的樣式了
                    process.env.NODE_ENV !== "production"?"vue-style-loader":MiniCssExtractPlugin.loader,
                    {
                        loader: "postcss-loader",
                        options: {
                            //  通過postcss-loader的autoprefixer插件自動(dòng)給需要兼容的css樣式加前綴
                            plugins: [require("autoprefixer")]
                        }
                    },
                    "css-loader"
                ]
            },
            {
                // 正則表達(dá)式匹配entry指定的js文件中使用import或者require引入的文件
                // 這里匹配的是引入文件后綴名為.js的文件
                test: /\.js$/,
                use: {
                    // 指定要處理的loader
                    loader: "babel-loader",
                    // 可以給這個(gè)loader傳遞一些參數(shù)
                    // 在這里就相當(dāng)于babel.config.js
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: ["@babel/plugin-transform-runtime"]
                    }
                },
                // 一定要配置這個(gè)exclude選項(xiàng),禁止babel去轉(zhuǎn)換node_modules模塊下的代碼
                // 不然就是一大堆奇奇怪怪的錯(cuò)誤
                exclude: /node_modules/
            },
            {
                // 就這么簡(jiǎn)單
                // 請(qǐng)看less---> test注釋  --> plugins需要引入一個(gè)插件
                test:/\.vue$/,
                loader:"vue-loader"
            }
        ]
    },

    // 所有插件都必須在plugins中new出來
    plugins: [
        new HtmlWebpackPlugin({
            // 指定需要打包的html文件
            template: "public/index.html",
            // 輸出的文件
            filename: "index.html"
        }),
        new MiniCssExtractPlugin({
            // 會(huì)將所有的樣式文件也合并到一個(gè)，這里需要指定一下對(duì)應(yīng)樣式文件的名稱
            filename: "css/[name].css",
        }),
        // 一定要new這個(gè)插件
        new VueLoaderPlugin()
    ],

    // 這是webpack-dev-server的配置
    devServer: {
        // 綁定端口3000
        port: 3000,
        // 自動(dòng)打開瀏覽器到指定網(wǎng)頁
        open: true,
        // 熱更新
        hot: true,
        // 代表網(wǎng)站根目錄那樣的，主目錄是哪里
        // 這里是dist，所以會(huì)自動(dòng)加載已經(jīng)打包好的文件
        // 直接填你output中的path就行了
        contentBase: "dist"
    }
}

最后我們?cè)谶M(jìn)行快速搭建vue進(jìn)行測(cè)試吧

npm i vue

修改main.js

import App from "./App.vue"
import Vue from "vue"

new Vue({
    render:h=>h(App)
}).$mount("#app");

給index.html添加一個(gè)id為app的div,App.vue如下

<template>
    <div>
      <span>Hello</span>
      <span>Vue</span>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>
div{
    width: 500px;
    height: 300px;
    text-align: center;
    background-color: yellow;
    span{
        font-size: 20px;
        font-style: italic;
        font-weight: bold;
        background-color: red;
    }
}
</style>

然后最后直接

npm run dev

那么其實(shí)webpack中的內(nèi)容遠(yuǎn)不止這些，還有好多比如說一些別名啊，性能優(yōu)化啊，還有可以設(shè)置webpack-dev-server內(nèi)置一些API啊，都可以在webpack.config.js中實(shí)現(xiàn)，那么其實(shí)呢，我也只能算帶大家伙的先入門，那么關(guān)于以后的修行就看自己了

教程遠(yuǎn)沒有結(jié)束，我還有不定期的更新一些插件啊，可能也會(huì)寫寫其他的配置，記得看最后的時(shí)間哦

有沒有啥相對(duì)我說的或者交流的或者你對(duì)學(xué)習(xí)前端有困惑什么的，可以聯(lián)系我哈群78484-->5854，偷偷告訴你樓主是自學(xué)的，并且不會(huì)英語哦

last update:2019年7月14日 16點(diǎn)09分

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在現(xiàn)在的前端開發(fā)中，前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,653評(píng)論 1贊 32
  • 目錄第1章 webpack簡(jiǎn)介 11.1 webpack是什么？ 11.2 官網(wǎng)地址 21.3 為什么使用 web...
    lemonzoey閱讀 1,816評(píng)論 0贊 1
  • Webpack學(xué)習(xí)總結(jié) 此文只是自己學(xué)習(xí)webpack的一些總結(jié)，方便自己查閱，閱讀不變，非常抱歉??！ 下載安裝：...
    Lxs_597閱讀 1,082評(píng)論 0贊 0
  • 學(xué)習(xí)流程 參考文檔:入門Webpack，看這篇就夠了Webpack for React 一. 簡(jiǎn)單使用webpac...
    Jason_Zeng閱讀 3,251評(píng)論 2贊 16
  • 周六下午，一陣急促的電話鈴聲把我從沉睡中驚醒過來，摸起電話，一個(gè)不容思索帶著命令口氣的聲音從那端清晰地傳過...
    九子九兒閱讀 217評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容