資訊專欄INFORMATION COLUMN
摘要：全局安裝初始化默認(rèn)的文件下載插件到并在文件中加上的配置內(nèi)容對(duì)項(xiàng)目進(jìn)行打包自動(dòng)監(jiān)控文件的改變打包時(shí)顯示隱藏的模塊打包時(shí)顯示顯示詳細(xì)錯(cuò)誤信息安裝并將該配置到文件中入口出口加載器插件安裝完乘后執(zhí)行報(bào)錯(cuò)，原因
npm install webpack -g // 全局安裝webpack npm init //初始化默認(rèn)的package.json文件 npm install webpack --save-dev //下載webpack插件到node_modules 并在package.json文件中加上webpack的配置內(nèi)容
webpack //對(duì)項(xiàng)目進(jìn)行打包
webpack --watch // 自動(dòng)監(jiān)控文件的改變 webpack --display-modules //打包時(shí)顯示隱藏的模塊 webpack --display-chunks //打包時(shí)顯示chunks webpack --display-error-details //顯示詳細(xì)錯(cuò)誤信息 npm install {whatever}-loader --save-dev //安裝loader并將該loader配置到package.json文件中 =======================
入口 entry
出口 output
loader 加載器
插件 plugins
====================
安裝完乘后執(zhí)行webpack報(bào)錯(cuò)，原因沒(méi)有找到默認(rèn)入口文件：
需要在當(dāng)前文件地址下創(chuàng)建置默認(rèn)入口文件路徑 ，創(chuàng)建后就不會(huì)報(bào)錯(cuò)了，或者也可以自定義路徑.
./src/index.js
用shell語(yǔ)句修改開(kāi)發(fā)環(huán)境：
webpack --mode=development
或者也可以按照后文方式配置到webpack.config.js 中
在node已經(jīng)安裝完成的前提下，全局安裝webpack
$ cd d:
$ mkdir test && cd test //創(chuàng)建test ，并進(jìn)入
$ npm install -g webpack //等待100s，安裝完成，也可以使用淘寶鏡像
$ npm init //初始化package.json文件
$ npm install --save-dev webpack //添加依賴 ，在package.json中聲明依賴,等待安裝完成
當(dāng)前目錄下創(chuàng)建如下工作結(jié)構(gòu):
/---------test
----app
----main.js
----index.js
----index.html
項(xiàng)目目錄下，app文件夾含有兩個(gè)js文件，修改如下：
//main.js ，這是Webpack主要的入口文件
require(./index.js);
//index.js ，這是被主文件引用的文件
document.write(Hello,world!);
//index.html ，供瀏覽器解讀
...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1512.html
摘要：中的配置熱加載插件安裝中的配置優(yōu)化插件為組件分配，通過(guò)這個(gè)插件可以分析和優(yōu)先考慮使用最多的模塊，并為它們分配最小的壓縮代碼分離和文件 0 前言 本文是針對(duì)TCM項(xiàng)目所做的WebPack配置文件總結(jié)，主要概述了一些常用配置選項(xiàng)和插件使用，對(duì)以后的項(xiàng)目有指導(dǎo)意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...
摘要：中的配置熱加載插件安裝中的配置優(yōu)化插件為組件分配，通過(guò)這個(gè)插件可以分析和優(yōu)先考慮使用最多的模塊，并為它們分配最小的壓縮代碼分離和文件 0 前言 本文是針對(duì)TCM項(xiàng)目所做的WebPack配置文件總結(jié)，主要概述了一些常用配置選項(xiàng)和插件使用，對(duì)以后的項(xiàng)目有指導(dǎo)意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...
摘要：前言本文基于，主要涉及基本概念基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來(lái)自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行優(yōu)化配置。同一文件中，修改某個(gè)影響其他。 前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來(lái)自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行...
摘要：面試你一般問(wèn)你的原理，的原理，你有用那些優(yōu)化措施前端開(kāi)發(fā)已經(jīng)模塊化，它改進(jìn)了代碼庫(kù)的封裝和結(jié)構(gòu)。這么說(shuō)負(fù)責(zé)的是處理源文件的如，一次處理一個(gè)文件。小心的運(yùn)用他們。因?yàn)殡S著項(xiàng)目的增長(zhǎng)，它們會(huì)變得很難馴服。 還是以前一樣，有些概念面試可能會(huì)考，我都用*標(biāo)記了出來(lái)，兩句話就總結(jié)清楚其余的地方如果你想了解webpack，就仔細(xì)看看，雖然本教程不能讓你webpack玩的很6，但是懂操作流程夠了。面...
閱讀 736·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6184·2021-11-29 11:00
