資訊專欄INFORMATION COLUMN
摘要：初始化項目官方文檔項目地址項目搭建簡單記錄一下命令，網(wǎng)上有很多文章不多做介紹。希望可以提供一個基礎(chǔ)的架構(gòu)。
初始化項目
webpack官方文檔：https://www.webpackjs.com/con...
github項目地址：https://github.com/Zhanghongw...
項目搭建簡單記錄一下命令，網(wǎng)上有很多文章不多做介紹。
希望可以提供一個基礎(chǔ)的架構(gòu)。
持續(xù)更新........
執(zhí)行命令
// 全局安裝 webapck、webpack-cli, 之前安裝過忽略此步驟 npm install webpack -g npm install webpack-cli -g
初始化 npm
npm init
項目目錄結(jié)構(gòu)
+dist
+src
++assets
+++images
++common
++page
++view
安裝相關(guān)依賴，注意版本
npm install xxx@版本號 --save-dev
{
"css-loader": "^2.1.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.23.1",
"url-loader": "^0.5.8",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.16.5"
}
webpack.config.js 配置文件
var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
// 獲取html-webpack-plugin參數(shù)的方法
var getHtmlConfig = function(name){
return {
template : "./src/view/" + name + ".html",
filename : "view/" + name + ".html",
inject : true,
hash : true,
chunks : ["common", name]
};
};
var config = {
entry: {
"common":["./src/common/index.js"],
"index":["./src/page/index/index.js"],
"home":["./src/page/home/home.js"]
},
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "/dist",
filename: "js/[name].js"
},
module: {
loaders: [
// 處理 css
{ test: /.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },
// 處理圖片
{ test: /.(gif|png|jpg|jpeg)??.*$/, loader: "url-loader?limit=100&name=resoure/[name].[ext]" }
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
// 公共模塊提取
name : "common",
filename : "js/base.js"
}),
// 把css多帶帶打包到文件里
new ExtractTextPlugin("css/[name].css"),
// html 模板處理
new HtmlWebpackPlugin(getHtmlConfig("index")),
new HtmlWebpackPlugin(getHtmlConfig("home"))
]
};
module.exports = config;
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103481.html
項目框架 基礎(chǔ)框架：https://segmentfault.com/a/11...使用之前 webpack 搭建的框架。 項目源碼 github 地址：https://github.com/Zhanghongw... 頁面開發(fā) 地址：https://segmentfault.com/a/11...
摘要：在的配置項中，可能會見到這樣的字符。的情況的可以指定。值是特定于整個構(gòu)建過程的。。因此，以上兩個值中更推薦的是。中的則和前面的一樣，指定了結(jié)果的截取長度。的情況被引用的通過來得到帶的文件。所以，這可能并不是我們想要的。 在webpack的配置項中，可能會見到hash這樣的字符。 當(dāng)存在hash配置的時候，webpack的輸出將可以得到形如這樣的文件： page1_bundle_54e8...
摘要：有沒有辦法實(shí)現(xiàn)就局部刷新呢當(dāng)然是有第十步執(zhí)行為了實(shí)現(xiàn)局部熱加載，我們需要添加插件。 前言 用了3個多月的vue自認(rèn)為已經(jīng)是一名合格的vue框架api搬運(yùn)工，對于vue的api使用到達(dá)了一定瓶頸，無奈水平有限，每每深入底層觀賞源碼時候都迷失了自己。 遂決定再找個框架學(xué)習(xí)學(xué)習(xí)看看能否突破思維局限，加上本人早已對React、RN技術(shù)垂涎已久,于是決定找找教程來學(xué)習(xí)。無奈第一步就卡在了環(huán)境搭...
摘要：而從技術(shù)實(shí)現(xiàn)角度，微前端架構(gòu)解決方案大概分為兩類場景單實(shí)例即同一時刻，只有一個子應(yīng)用被展示，子應(yīng)用具備一個完整的應(yīng)用生命周期。為了解決產(chǎn)品研發(fā)之間各種耦合的問題，大部分企業(yè)也都會有自己的解決方案。 原文鏈接：https://zhuanlan.zhihu.com/p/... Techniques, strategies and recipes for building a modern ...
摘要：介紹文件是根據(jù)里面描述的內(nèi)容對一個項目進(jìn)行打包的。配置文件后綴名，除了，還有等等。大部分的對文件的處理的功能都是通過實(shí)現(xiàn)的。下面介紹怎么使用這個功能。 注意：本文描述的配置只適用webpack1.x;由于webpack已經(jīng)推出2.x并有大量更改，特此申明 概述 Webpack是一款用戶打包前端模塊的工具。主要是用來打包在瀏覽器端使用的javascript的。同時也能轉(zhuǎn)換、捆綁、打包其他...
閱讀 2299·2021-11-24 09:39
閱讀 2543·2021-11-22 15:24
閱讀 2982·2021-09-02 09:48
閱讀 3019·2021-07-26 22:01
閱讀 1439·2019-08-30 11:09
閱讀 1677·2019-08-29 18:47
閱讀 610·2019-08-29 15:40
閱讀 2138·2019-08-29 15:22
