資訊專欄INFORMATION COLUMN
摘要：因?yàn)檫@里我的文件夾名字起的叫，所以默認(rèn)生成的中的就是，而是關(guān)鍵字會(huì)導(dǎo)致，只需要打開(kāi)把隨便改一下即可。其實(shí)關(guān)于都還有很多參數(shù)配置和方法，不過(guò)對(duì)于入門(mén)，在上面這些東西搞明白后，就已經(jīng)可以跑起來(lái)一個(gè)簡(jiǎn)單的流程了。
WebPack已經(jīng)火了好久，幾乎已經(jīng)成為一個(gè)前端的必備技能，先翻譯官網(wǎng)兩句話。
WebPack是一個(gè)靈活的、可擴(kuò)展的、公平的、可用于生產(chǎn)環(huán)境的、開(kāi)源的模塊打包器。
WebPack V1版本已經(jīng)過(guò)時(shí)，請(qǐng)開(kāi)發(fā)者們升級(jí)到V2。
這篇筆記是基于WebPack V2.2.1 開(kāi)始。
安裝（Installation）npm install webpack -g 全局安裝webpack，這樣可以在全局使用webpack命令；
新建webpack文件夾，Terminal/cmd切換到webpack文件夾下，執(zhí)行npm init -y生成package.json文件
-y: init過(guò)程中會(huì)有一堆繁瑣的問(wèn)題，比如包名、作者、描述、依賴等一些東西，通過(guò)-y命令可以直接跳過(guò)，默認(rèn)全部“是”。
PS：因?yàn)檫@里我的文件夾名字起的叫webpack，所以默認(rèn)生成的package.json中的name就是webpack，而webpack是關(guān)鍵字會(huì)導(dǎo)致err，只需要打開(kāi)package.json把name隨便改一下即可。
npm install webpack --save-dev 如果想要安裝特定版本的webpack可以使用 npm install webpack@
--save：save 的意思是把安裝信息保存到 package.json中，打開(kāi)package.json會(huì)發(fā)現(xiàn)多了devDependencies項(xiàng)已經(jīng)把webpack添加進(jìn)去了："devDependencies": {"webpack": "^2.2.1"}；
-dev：dev的意思是當(dāng)前安裝插件是放在"devDependencies"中，表示是開(kāi)發(fā)時(shí)所需依賴，正式生產(chǎn)環(huán)境所需依賴不需要添加-dev，是會(huì)放在"Dependencies"中
開(kāi)始（Getting Started）
首先建好文件目錄
webpack.config.js：類似gulpfile.js，配置相關(guān)設(shè)置，我覺(jué)得放在根目錄下會(huì)合適一些，在配置path時(shí)會(huì)方便一些，執(zhí)行webpack命令時(shí)會(huì)默認(rèn)搜索webpack.config.js文件，也可以通過(guò)指定 --config指定其他文件為配置文件
app：存放項(xiàng)目文件模塊
PS：在模塊化開(kāi)發(fā)中，這種文件目錄是不推薦的，需要依模塊來(lái)劃分文件目錄
dist：存放webpack處理后的文件
新建JS/css文件
hello.js
const msg = "Hello ";
export default class Hello {
constructor() {
this.say = this.say.bind(this);
}
say (word) {
document.write(msg + word);
}
ask () {
document.write("Say Something Please");
setTimeout(() => this.say("webpack"), 1000);
}
}
- index.js
import css from "./index.css"; import Hello from "./hello.js"; new Hello().ask();
- index.css
html,body{
margin:0;
padding:0;
}
body{
background:red;
color: #fff;
font-size: 40px;
}
3.安裝部分所需依賴
npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015：因?yàn)橛玫搅薳s6的語(yǔ)法，所以我們需要對(duì)es6語(yǔ)法進(jìn)行轉(zhuǎn)換 npm install style-loader --save-dev css-loader --save-dev： 安裝處理css的loader
4.配置webpack.config.js
const path = require("path");
module.exports = {
entry: "./app/index.js",
output: {
filename: "bundle.[hash].js",
path: path.resolve(__dirname, "dist")
},
module: {
loaders: [
{
test: /.js$/,
loader: "babel-loader",
query: {
presets: ["es2015"]
}
},
{
test: /.css$/,
loaders: ["style-loader", "css-loader"]
}
]
}
};
path: path是Node中的內(nèi)置對(duì)象，也是Node的核心模塊之一，這里引入path對(duì)象，主要是為了控制生成文件的目錄path.resolve(__dirname, "dist")這句話中，resolve會(huì)將參數(shù)中的路徑或路徑片段的序列解析為一個(gè)絕對(duì)路徑，__dirname表示當(dāng)前文件模塊所在的完整的絕對(duì)路徑，這樣即使項(xiàng)目遷移，地址變更，只要保證相對(duì)路徑正確即可。
context： 上下文，這里省略了，默認(rèn)為當(dāng)前文件模塊的絕對(duì)路徑，下面的entry和output中的路徑都是相對(duì)于context上下文的相對(duì)路徑
entry： 入口文件，如果有多個(gè)不同的入口文件，可以寫(xiě)成對(duì)象的形式
output：配置webpack打包后輸出文件的參數(shù)
filename: 輸出的文件名，"bundle.[hash].js"中，hash是webpack會(huì)生成一個(gè)hash值，這里還可以有的寫(xiě)法如："[name].[hash].js"指的是 入口文件的名字.hash值.js hash也可以改成chunkhash，如果entry中有多個(gè)入口文件，則每一次某個(gè)文件的改動(dòng)都會(huì)引起所有輸出文件hash值得改變，而chunkhash只會(huì)影響有改動(dòng)模塊文件。
path: 生成文件的輸出路徑
modules: 配置不同文件所需要的loaders以及插件配置，至于什么文件需要什么loaders，在官網(wǎng)和很多地方都可以找到說(shuō)明。
其實(shí)關(guān)于output/modules都還有很多參數(shù)配置和方法，不過(guò)對(duì)于入門(mén)，在上面這些東西搞明白后，就已經(jīng)可以跑起來(lái)一個(gè)簡(jiǎn)單的流程了。更多的知識(shí)，在后期遇到其他的痛點(diǎn)時(shí)會(huì)去搞明白的。
我的WebPack入門(mén)（二）文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/88156.html
摘要：可以根據(jù)你設(shè)置的模板，在每次運(yùn)行后生成對(duì)應(yīng)的模板文件，同時(shí)所依賴的也都會(huì)被引入，如果中含有值，則生成的模板文件也會(huì)引入正確版本的文件。 上一節(jié)的入門(mén)中，只是跑通了一個(gè)很簡(jiǎn)單的webpack項(xiàng)目的流程，對(duì)其中的參數(shù)以及實(shí)戰(zhàn)運(yùn)用中的一些用法并不太清楚，雖然目前工作項(xiàng)目中并沒(méi)有用起webpack，不過(guò)覺(jué)得還是需要再去摸索一番，以便可以更清楚的用起這個(gè)工具。 上一節(jié)最終運(yùn)行webpack命令，...
摘要：例如現(xiàn)在的入門(mén)學(xué)習(xí)手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門(mén)學(xué)習(xí)手記一，主要是介紹了的核心概念，是整個(gè)學(xué)習(xí)過(guò)程的基礎(chǔ)知識(shí)。新生成的類似如下入門(mén)學(xué)習(xí)手記因?yàn)樯傻膬?nèi)容過(guò)多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注。 最近開(kāi)始想要維護(hù)一個(gè)個(gè)人的公眾...
摘要：另外需要指定這個(gè)參數(shù)，表示在配置的數(shù)值以下的圖片才進(jìn)行編碼，超過(guò)的不進(jìn)行處理。代碼如下所以過(guò)程就是引入了，然后進(jìn)行打包處理，生成和。目前這個(gè)入門(mén)學(xué)習(xí)手記到這里就結(jié)束了。完相關(guān)文章入門(mén)學(xué)習(xí)手記一入門(mén)學(xué)習(xí)手記二入門(mén)學(xué)習(xí)手記三入門(mén)學(xué)習(xí)手記四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...
摘要：爭(zhēng)取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續(xù)相關(guān)文章入門(mén)學(xué)習(xí)手記一入門(mén)學(xué)習(xí)手記二入門(mén)學(xué)習(xí)手記三入門(mén)學(xué)習(xí)手記四 本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過(guò)gulp、grunt，但是一直沒(méi)有學(xué)習(xí)過(guò)webpack。這兩天剛好有時(shí)間，學(xué)習(xí)了下...
摘要：同時(shí)它還提供了自動(dòng)刷新熱更新等功能，使開(kāi)發(fā)變得非常方便。的到來(lái)減少了很多的配置，它內(nèi)置了很多的功能。 上一篇文章里詳細(xì)介紹了一下插件的用法，這一篇文章接著豐富module.exports里的屬性。如今的前端發(fā)展已經(jīng)非常迅速了，伴隨而來(lái)的是開(kāi)發(fā)模式的轉(zhuǎn)變?，F(xiàn)在已經(jīng)不再是寫(xiě)個(gè)靜態(tài)頁(yè)面并放在瀏覽器里打開(kāi)預(yù)覽一下了。在實(shí)際的開(kāi)發(fā)中會(huì)經(jīng)常需要使用http服務(wù)器，比如之前的ajax，想要看到效果就...
閱讀 1686·2021-11-11 10:59
閱讀 2697·2021-09-04 16:40
閱讀 3752·2021-09-04 16:40
閱讀 3077·2021-07-30 15:30
閱讀 1817·2021-07-26 22:03
閱讀 3226·2019-08-30 13:20
閱讀 2298·2019-08-29 18:31
閱讀 501·2019-08-29 12:21
