資訊專欄INFORMATION COLUMN
摘要：全局安裝安裝現(xiàn)在我們就可以全局的使用命令了中基礎(chǔ)的命令這個(gè)命令是將打包成，然后只需要引用該文件就可以了看如下這是簡單的代碼。
全局安裝安裝webapck
npm i webpack -g
現(xiàn)在我們就可以全局的使用webpack命令了
webpack中基礎(chǔ)的命令：
webpack enter.js output.js --watch
這個(gè)命令是將enter.js打包成output.js，然后html只需要引用該文件就可以了
看如下entry.js,這是簡單的js代碼。
// 這邊是處理js邏輯
let people = require("./people")
let $ = require("jquery")
$.each(people, function(key, value){
$("body").append(""+people[key].name+"
")
})
那么如何來打包c(diǎn)ss文件呢，只需要將css也引入到enter.js即可，這樣跟文件index.html還是只需要引用output.js即可
引入css需要幾個(gè)插件；css-loader， style-loader（由于是靜態(tài)文件，需要編譯）
require("!style-loader!css-loader!./style.css")
以上為簡單的打包；如果需要復(fù)雜的工程的話，webpack推薦使用配置文件來配置
webpack的配置文件必須是webpack.config.js
上面的配置只需要這樣寫
module.exports = {
// 入口文件
entry: "./app.js",
// 出口文件
output: {
path: __dirname,
filename: "bundle.js"
},
// 需要依賴的插件或裝載器
mudule: {
loader: [
{
test: /.css$/,
loader: "style-loader!css-loader"
}
]
}
}
以下是一個(gè)簡易的開發(fā)目錄
針對(duì)該目錄配置文件如下
ps: 需要將es6轉(zhuǎn)碼需要安裝 babel-core,babel-loader,babel-env,babel-preset-es2015
module.exports = {
// 入口文件
entry: ".src/js/app.js",
// 出口文件
output: {
path: __dirname,
filename: "bundle.js"
},
// 需要依賴的插件或裝載器
mudule: {
loader: [
// css加載
{
test: /.css$/,
loader: "style-loader!css-loader"
},
// es6轉(zhuǎn)碼為es2015
{
test: /.js/,
loader: "babel-loader",
query: {
presets: ["es2015"] // ps這一塊也可以寫在.babelrc文件下
},
exclude: /node_modules/
}
]
},
// 自動(dòng)生成html文件，會(huì)引入js
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: "./index.html"})
]
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52456.html
摘要：爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續(xù)相關(guān)文章入門學(xué)習(xí)手記一入門學(xué)習(xí)手記二入門學(xué)習(xí)手記三入門學(xué)習(xí)手記四 本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt，但是一直沒有學(xué)習(xí)過webpack。這兩天剛好有時(shí)間，學(xué)習(xí)了下...
摘要：引言最近在學(xué)習(xí)，發(fā)現(xiàn)好多知識(shí)點(diǎn)，之前一點(diǎn)都沒有接觸過，如等等。使用本地安裝，會(huì)存于文件夾內(nèi)與屬性內(nèi)，更方便項(xiàng)目文件遷移以及協(xié)同開發(fā)等情況。 引言 最近在學(xué)習(xí)webpack，發(fā)現(xiàn)好多知識(shí)點(diǎn)，之前一點(diǎn)都沒有接觸過，如babel、core-js、browserslist等等。以前習(xí)慣了使用cli構(gòu)建項(xiàng)目，很多東西不用考慮，拿來就用，這樣的碼農(nóng)是不會(huì)有能力提升的，必須了解更多的知識(shí)點(diǎn)，才能成為...
摘要：例如現(xiàn)在的入門學(xué)習(xí)手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學(xué)習(xí)手記一，主要是介紹了的核心概念，是整個(gè)學(xué)習(xí)過程的基礎(chǔ)知識(shí)。新生成的類似如下入門學(xué)習(xí)手記因?yàn)樯傻膬?nèi)容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注。 最近開始想要維護(hù)一個(gè)個(gè)人的公眾...
摘要：前言在上一篇文章中我介紹了學(xué)習(xí)前的準(zhǔn)備工作，下面開始的學(xué)習(xí)。目標(biāo)一般我們接觸到的關(guān)于的文章，都是以解讀官方文檔為主，而且是針對(duì)單頁面項(xiàng)目的應(yīng)用。我先在假設(shè)要做一個(gè)多頁面應(yīng)用，該如何去通過打包。 前言 在上一篇文章中我介紹了學(xué)習(xí)webpack前的準(zhǔn)備工作，下面開始webpack的學(xué)習(xí)。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...
摘要：前言在上一篇文章中我介紹了學(xué)習(xí)前的準(zhǔn)備工作，下面開始的學(xué)習(xí)。目標(biāo)一般我們接觸到的關(guān)于的文章，都是以解讀官方文檔為主，而且是針對(duì)單頁面項(xiàng)目的應(yīng)用。我先在假設(shè)要做一個(gè)多頁面應(yīng)用，該如何去通過打包。 前言 在上一篇文章中我介紹了學(xué)習(xí)webpack前的準(zhǔn)備工作，下面開始webpack的學(xué)習(xí)。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...
閱讀 907·2021-09-22 15:17
閱讀 1937·2021-09-22 15:06
閱讀 2224·2021-09-08 09:35
閱讀 5113·2021-09-01 11:43
閱讀 3485·2019-08-30 15:55
閱讀 2159·2019-08-30 12:48
閱讀 3158·2019-08-30 12:45
閱讀 1791·2019-08-29 17:31
