亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

自己動手搭建webpack

douzifly / 3609人閱讀

摘要：初探從頭整理搭建流程主要配置入口配置輸出配置文件解析模塊配置插件配置目錄介紹存放構(gòu)建配置文件項目開發(fā)目錄公共靜態(tài)文件腳本文件樣式文件頁面文件初始包開發(fā)依賴這里使用版本開始搭建在文件夾下面創(chuàng)建，代碼如下在文件夾下面創(chuàng)建，任意寫幾行代碼以

wepack初探

從頭整理webpack搭建流程

webpack主要配置

entry：入口配置

output：輸出配置

module：文件解析模塊配置

plugin：插件配置

目錄介紹

build/：存放webpack構(gòu)建配置文件

src/：項目開發(fā)目錄

public/：公共靜態(tài)文件

script/：腳本文件

style/：樣式文件

view/：頁面文件

初始npm包

開發(fā)依賴

babel-core

babel-loader

webpack：這里使用webpack3版本

開始搭建

在build/文件夾下面創(chuàng)建webpack.dev.js，代碼如下：

const path = require("path")

module.exports = {
    entry: path.join(__dirname, "../src/script/index.js"),
    output: {
        path: path.join(__dirname, "../dist"),
        filename: "js/[name].js"
    },
    module: {
        loaders: [{
            test: /.js$/,
            use: "babel-loader"
        }]
    }
}

在src/script/文件夾下面創(chuàng)建index.js，任意寫幾行代碼以便測試

在src/view/文件夾下面創(chuàng)建index.html，引入上面的index.js文件

npm init -y或者yarn init -y創(chuàng)建package.json文件，安裝開發(fā)依賴

在package.json文件中添加scripts屬性

"scripts": {
    "dev": "rm -rf dist & webpack --config build/webpack.dev.js"
}

打開終端執(zhí)行npm run dev命令

引入html-webpack-plugin插件

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

module.export = {
    entry: path.join(__dirname, "../src/script/index.js"),
    output: {
        path: path.join(__dirname, "../dist"),
        filename: "js/[name].js"
    },
    module: {
        loaders: [{
            test: /.js$/,
            use: "babel-loader"
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 打包生成html文件名，該文件被放置在輸出目錄中
            filename: "index.html",
            // 模板文件，以該文件生成打包后的html文件
            template: path.join(__dirname, "../src/view/index.html")
        })
    ]
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95752.html

相關(guān)文章

  • 學習從零開始搭建React腳手架

    摘要：寫在前面準備學習一下和相關(guān)的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建全家桶框架教程步驟上都差不多第一步，依賴總覽完成到我現(xiàn)在半成品的過程中，目前完成開發(fā)模式的相關(guān)操作，添加了按需加載的地步。 寫在前面 準備學習一下react和webpack相關(guān)的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建React全家桶框架教程;...

    cod7ce 評論0 收藏0

  • 超詳細動手搭建一個Vuepress站點及開啟PWA與自動部署

    摘要：五一之前就想寫一篇關(guān)于的文章結(jié)果朋友結(jié)婚就不了了之了。記得最后一定要看注意事項更新倉庫介紹官網(wǎng)類似一個極簡的靜態(tài)網(wǎng)站生成器用來寫技術(shù)文檔不能在爽。當然搭建成博客也不成問題。構(gòu)建與自動部署用的或者的都可以也可以搭建在自己的服務(wù)器上。 五一之前就想寫一篇關(guān)于Vuepress的文章,結(jié)果朋友結(jié)婚就不了了之了。記得最后一定要看注意事項！ 更新：coding倉庫：https://git.dev...

    zhoutk 評論0 收藏0

  • webpack+vue項目實戰(zhàn)（三，配置功能操作頁和組件的按需加載）

    摘要：但是實際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時候才加載。 1.前言 上篇文章（webpack+vue項目實戰(zhàn)（二，開發(fā)管理系統(tǒng)主頁面）），實現(xiàn)了，側(cè)邊欄的一個操作，點擊側(cè)邊欄的一些操作，最重要的就是路由的切換?？戳松弦黄幕锇橐膊浑y發(fā)現(xiàn)，除了點擊側(cè)邊欄‘首頁’之外，點擊其它的都是白色的一片。原因我想大家都...

    endless_road 評論0 收藏0

  • webpack4詳細教程，從無到有搭建react腳手架（一）

    摘要：是一個現(xiàn)代應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個前端工程師切圖仔，非常有必要學習。官網(wǎng)的文檔非常的棒，中文文檔也非常給力，可以媲美的文檔。建議先看概念篇章，再看指南，然后看和配置總覽。 webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個前端工程師（切圖仔），非常有必要學習。 showImg(https://segment...

    zhkai 評論0 收藏0

  • multipages-generator今日發(fā)布?！媽媽再也不用擔心移動端h5網(wǎng)站搭建了！

    摘要：本文適合的讀者現(xiàn)在在手淘，京東，今日頭條，美柚等過億用戶的手機中的，都常見網(wǎng)頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個的例子手淘，美柚。 本文適合的讀者??????? 現(xiàn)在在手淘，京東，今日頭條，美柚等過億用戶的手機app中的，都常見h5網(wǎng)頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個h5的例子：（手淘，美柚）。這些app中都嵌者數(shù)以百計，千計的...

    xavier 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<