自己動手搭建webpack

douzifly 發布于2019-08-22 18:20 / 3549人閱讀

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

wepack初探

從頭整理webpack搭建流程

webpack主要配置

entry：入口配置

output：輸出配置

module：文件解析模塊配置

plugin：插件配置

目錄介紹

build/：存放webpack構建配置文件

src/：項目開發目錄

public/：公共靜態文件

script/：腳本文件

style/：樣式文件

view/：頁面文件

初始npm包

開發依賴

babel-core

babel-loader

webpack：這里使用webpack3版本

開始搭建

在build/文件夾下面創建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/文件夾下面創建index.js，任意寫幾行代碼以便測試

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

npm init -y或者yarn init -y創建package.json文件，安裝開發依賴

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

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

打開終端執行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")
        })
    ]
}

云服務器 GPU云服務器自己動手寫爬蟲自己動手寫網路爬蟲自己動手寫網絡爬蟲自己動手寫開發工具

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

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

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

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

cod7ce 2019-08-23 11:25 評論0 收藏0
超詳細動手搭建一個Vuepress站點及開啟PWA與自動部署

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

zhoutk 2019-05-29 17:50 評論0 收藏0
webpack+vue項目實戰（三，配置功能操作頁和組件的按需加載）

摘要：但是實際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時候才加載。 1.前言上篇文章（webpack+vue項目實戰（二，開發管理系統主頁面）），實現了，側邊欄的一個操作，點擊側邊欄的一些操作，最重要的就是路由的切換。看了上一篇的伙伴也不難發現，除了點擊側邊欄‘首頁’之外，點擊其它的都是白色的一片。原因我想大家都...

endless_road 2019-08-20 17:46 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（一）

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

zhkai 2019-08-23 18:35 評論0 收藏0
multipages-generator今日發布?！媽媽再也不用擔心移動端h5網站搭建了！

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

xavier 2019-08-02 10:04 評論0 收藏0