本文目錄一覽：
Webpack 配置
通過 http://[devServer.host]:[devServer.port]/webpack-dev-server 查看 devServer 提供的所有資源列表。
通過 http://[devServer.host]:[devServer.port]/[output.publicPath]/資源名稱 來訪問對應的資源。
如果提供了 devMiddleware.publicPath ，則通過 http://[devServer.host]:[devServer.port]/[devMiddleware.publicPath]/資源名稱 來訪問對應的資源，但是通過插件生成的 html 和 css 文件當中所有資源引用的路徑仍然使用的是 http://[devServer.host]:[devServer.port]/[output.publicPath]/資源名稱 。因此需要保證 output.publicPath 與 devMiddleware.publicPath 一致。
static 設置的是靜態資源目錄的位置，不是打包生成的文件的存放位置，devServer 打包生成的文件存放在內存中，不存放到硬碟目錄。
static.publicPath 設置的是訪問靜態資源的路徑，不是訪問打包生成的資源的路徑，打包生成的資源路徑通過 output.publicPath 訪問，靜態資源路徑訪問的是直接存放在靜態目錄中的靜態資源。
配置文件
initial chunk 的文件名
佔位符：
non-initial chunk 的文件名，佔位符參考 output.filename
設置為 true ，每次打包之前清理 output.path 目錄中的所有內容，可以替代 CleanWebpackPlugin 插件。
定義資源存放的位置，例如根據以上的配置文件打包之後生成如下文件：
將 1 2 3 生成的資源都存放到 output.path 目錄， dist/app.bundle.js dist/css/app.min.css dist/images/1.jpg
部署的時候，將該目錄下的內容複製到伺服器對應的目錄即可。
定義資源訪問的路徑
資源訪問路徑 = output.publicPath + 資源名稱
output.publicPath 可以是絕對路徑、相對於服務的路徑、相對於頁面的路徑。 不管是哪種路徑，都要以 / 結尾
HtmlWebpackPlugin 生成的 index.html 文件：
MiniCssExtractPlugin 生成的 css 文件：
HtmlWebpackPlugin 生成的 index.html 文件：
MiniCssExtractPlugin 生成的 css 文件：
HtmlWebpackPlugin 生成的 index.html 文件：
MiniCssExtractPlugin 生成的 css 文件：
不管通過哪種路徑設置 output.publicPath ，都只是影響 HtmlWebpackPlugin 和 MiniCssExtractPlugin 生成的文件中引用其他資源的路徑。具體能不能根據資源路徑訪問到相應的資源，還得正確的部署 output.path 目錄到伺服器。
在開發模式下，devServer 自動開啟一個開發伺服器，並且將所有打包生成的資源存儲到內存當中，然後通過 http://[devServer.host]:[devServer.port]/[output.publicPath]/資源名稱 來訪問對應的資源。 這時候 output.publicPath 應該設置為相對服務的路徑，例如 / 。
如果你的頁面希望在其他不同路徑中找到資源文件，則可以通過 devServer 配置中的 devMiddleware.publicPath 選項進行修改。
在生產模式下，推薦將 output.publicPath 設置為絕對路徑，然後將 output.path 目錄部署與絕對路徑對應的伺服器中。
配置文件
module.rules 是匹配規則數組，數組中的每一項為一條匹配規則，以下稱為 rule。每條 rule 包括匹配條件和匹配結果。
對於依賴圖中的每個模塊路徑，都按照 module.rules 中的 rule 依次進行匹配。如果模塊路徑滿足某個 rule 的匹配條件，則對該模塊應用該 rule 的 匹配結果中指定的 loader 進行預處理。? 如果模塊路徑滿足多個 rule 的匹配條件 ?
匹配條件包括 test include exclude 選項，每個選項為一個匹配條件，選項的值可以是：
如果某個 rule 同時有多個匹配條件選項，則模塊路徑必須同時滿足所有的匹配條件，才會對模塊應用匹配結果。test 和 include 具有相同的作用，都是必須匹配選項。exclude 是必不匹配選項（優先於 test 和 include）。
最佳實踐：
以上配置文件的第二條 rule，如果某個模塊不在 ./src/node_modules/ 和 ./src/libs/ 目錄下，並且在 ./src/ 目錄下，並且模塊名以 .js 結尾，則滿足該條 rule 的匹配條件。
package.json
webpack.common.js
webpack.prod.js
webpack.dev.js
webpack安裝失敗，請問這樣要怎麼解決
可以看看webpack的官網的, 比如在installation這個章節, 裡面就介紹了怎麼安裝webpack.
首先你需要安裝一個全局的webpack
npm install webpack -g
這樣你才可以正確的使用webpack這個命令
然後, 你還可以在當前項目裡面也安裝一個webpack, 這也是官方推薦的做法
npm install webpack –save-dev
這樣就可以在你的webpack.config.js裡面方便的引用webpack
// webpack.config.js
var path = require(‘path’);
var webpack = require(‘webpack’);
然後在使用一些plugin的時候就比較方便了
new webpack.optimize.CommonsChunkPlugin(‘common.js’)
或者你可以看看webpack的官網的, 比如在installation這個章節,
裡面就介紹了怎麼安裝webpack. 首先你需要安裝一個全局的webpack npm install webpack -g
這樣你才可以正確的使用webpack這個命令 然後, 你還可以在當前項目裡面也安裝一個webpack, 這也…
webpack多頁面怎麼使用
webpack是一款模塊載入器兼打包工具，能把js,css,頁面，圖片，視頻等各種資源，進行模塊化處理。而現在網上流傳很多單頁面的webpack模型，那多頁面呢？比較少，現在我提供一個多頁面的前端模型。希望大家適合使用。
功能介紹
這模型是多頁面模塊打包，模型是用html，你們可以換成自己的jsp,php按你自己的需要來。
通過運行服務，把文件直接打包到dist目錄下，dist是編譯後的文件，服務直接讀取dist目錄。而開發文件是放在在src目錄下。啟動運行服務，會監聽src文件的變化進行熱更操作直接打包到dist目錄。
打包功能包括：sass,雪碧圖製作，視頻文件（mp4,flv,swf）,js和css文件壓縮,圖片（png,jpg,gif)，文件（woff,woff2,ttf,eot,svg）。
安裝與使用
安裝依賴包
npm install –save-dev #部分包需要全局安裝 看到失敗的包就全局安裝一下就行
運行
webpack-dev-server –hot –inlinewebpack -w
運行成功查看
127.0.0.1:9090/
打包
webpack
壓縮文件打包
webpack -p
文件目錄
– website
– src #代碼開發目錄
– css #css目錄，按照頁面（模塊）、通用、第三方三個級別進行組織
+ page
+ common
+ lib
+ img #圖片資源
+ sprite #雪碧圖
favicon.ico #圖標
+ video #視頻文件
– js #JS腳本，按照page、components進行組織
+ page
+ components
+ view #HTML模板
index.html #首頁
– dist #webpack編譯打包輸出目錄，無需建立目錄可由webpack根據配置自動生成
+ css
+ js
+ img
+ video
+ view
index.html
+ node_modules #所使用的nodejs模塊
package.json #項目配置
webpack.config.js #webpack配置
README.md #項目說明
packange
packange.json
{
“name”: “webpack-model”,
“version”: “1.0.0”,
“description”: “page demo”,
“scripts”: {
},
“author”: “Jarun”,
“license”: “ISC”,
“devDependencies”: {
“css-loader”: “^0.23.1”,
“extract-text-webpack-plugin”: “^1.0.1”,
“file-loader”: “^0.8.5”,
“html-loader”: “^0.4.3”,
“html-webpack-plugin”: “^2.9.0”,
“jquery”: “^1.12.0”,
“less”: “^2.6.0”,
“less-loader”: “^2.2.2”,
“plugins”: “^0.4.2”,
“replace”: “^0.3.0”,
“style-loader”: “^0.13.0”,
“url-loader”: “^0.5.7”,
“vue-hot-reload-api”: “^2.0.11”,
“webpack”: “^1.12.13”,
“webpack-dev-middleware”: “^1.10.1”,
“webpack-dev-server”: “^1.16.3”,
“webpack-spritesmith”: “^0.3.3”
}
}
webpack.config
webpack.config.js
var path = require(‘path’);
var webpack = require(‘webpack’);
var glob = require(‘glob’);
var WebpackDevServer = require(‘webpack-dev-server’)
var SpritesmithPlugin = require(‘webpack-spritesmith’);
/*
extract-text-webpack-plugin插件，
有了它就可以將你的樣式提取到單獨的css文件里，
媽媽再也不用擔心樣式會被打包到js文件里了。
*/
var ExtractTextPlugin = require(‘extract-text-webpack-plugin’);
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具體可以去這裡查看
*/
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
var entries = getEntry(‘src/js/page/**/*.js’, ‘src/js/page/’);
var commonsChunk = getCommonsChunk(‘src/js/page/**/*.js’, ‘src/js/page/’);
var config = {
entry: entries,
output: {
path: path.join(__dirname, ‘dist’), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對於它
publicPath: ‘./dist/’, //模板、樣式、腳本、圖片等資源對應的server上的路徑
filename: ‘js/[name].js’, //每個頁面對應的主js的生成配置
chunkFilename: ‘js/[id].chunk.js’ //chunk生成的配置
},
module: {
loaders: [ //載入器，關於各個載入器的參數配置，可自行搜索之。
{
test: /\.css$/,
//配置css的抽取器、載入器。’-loader’可以省去
loader: ExtractTextPlugin.extract(‘style-loader’, ‘css-loader’)
}, {
test: /\.less$/,
//配置less的抽取器、載入器。中間!有必要解釋一下，
//根據從右到左的順序依次調用less、css載入器，前一個的輸出是後一個的輸入
//你也可以開發自己的loader喲。有關loader的寫法可自行谷歌之。
loader: ExtractTextPlugin.extract(‘css!less’)
}, {
//html模板載入器，可以處理引用的靜態資源，默認配置參數attrs=img:src，處理圖片的src引用的資源
//比如你配置，attrs=img:src img:data-src就可以一併處理data-src引用的資源了，就像下面這樣
test: /\.html$/,
loader: “html?attrs=img:src img:data-src”
}, {
//文件載入器，處理文件靜態資源
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: ‘file-loader?name=fonts/[name].[ext]’
}, {
//視頻載入
test: /\.(mp4|flv|swf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: ‘file-loader?name=video/[name].[ext]’
}, {
//圖片載入器，雷同file-loader，更適合圖片，可以將較小的圖片轉成base64，減少http請求
//如下配置，將小於50000byte的圖片轉成base64碼
test: /\.(png|jpg|gif)$/,
loader: ‘url-loader?limit=5000name=img/[hash].[ext]’
}
]
},
//使用webpack-dev-server，提高開發效率
devServer: {
historyApiFallback:true,
contentBase: ‘./dist’,
host: ‘127.0.0.1’,
progress:true,//報錯無法識別，刪除後也能正常刷新
port: 9090,
inline: true,
hot: true,
},
plugins: [
new webpack.ProvidePlugin({ //載入jq
$: ‘jquery’,
jQuery:”jquery”,
“window.jQuery”:”jquery”
}),
new webpack.optimize.CommonsChunkPlugin({
name: ‘common’, // 將公共模塊提取，生成名為`vendors`的chunk
chunks: commonsChunk, //提取哪些模塊共有的部分
minChunks: commonsChunk.length // 提取至少3個模塊共有的部分
}),
new ExtractTextPlugin(‘css/[name].css’), //單獨使用link標籤載入css並設置路徑，相對於output配置中的publickPath
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, ‘src/img/sprite/’),
glob: ‘*.png’
},
target: {
image: path.resolve(__dirname, ‘src/img/sprite.png’),
css: path.resolve(__dirname, ‘src/css/common/sprite.sass’)
},
apiOptions: {
cssImageRef: “~sprite.png”
}
}),
//HtmlWebpackPlugin，模板生成相關的配置，每個對於一個頁面的配置，有幾個寫幾個
new HtmlWebpackPlugin({ //根據模板插入css/js等生成最終HTML
favicon: ‘./src/img/favicon.ico’, //favicon路徑，通過webpack引入同時可以生成hash值
filename: ‘./index.html’, //生成的html存放路徑，相對於path
template: ‘./src/index.html’, //html模板路徑
inject: ‘body’, //js插入的位置，true/’head’/’body’/false
hash: true, //為靜態資源生成hash值
chunks: [‘common’, ‘index’],//需要引入的chunk，不配置就會引入所有頁面的資源
minify: { //壓縮HTML文件
removeComments: true, //移除HTML中的注釋
collapseWhitespace: false //刪除空白符與換行符
}
}),
new webpack.HotModuleReplacementPlugin() //熱載入
]
};
var viesObj = getView(‘src/view/**/*.html’, ‘src/view/’)
var pages = Object.keys(viesObj);
pages.forEach(function(pathname) {
var htmlName = viesObj[pathname]
var conf = {
filename: ‘./view/’ + htmlName + ‘.html’, //生成的html存放路徑，相對於path
template: ‘./src/view/’ + htmlName + ‘.html’, //html模板路徑
inject: ‘body’, //js插入的位置，true/’head’/’body’/false
hash: true, //為靜態資源生成hash值
favicon: ‘./src/img/favicon.ico’, //favicon路徑，通過webpack引入同時可以生成hash值
chunks: [‘common’,htmlName],//需要引入的chunk，不配置就會引入所有頁面的資源
minify: { //壓縮HTML文件
removeComments: true, //移除HTML中的注釋
collapseWhitespace: false //刪除空白符與換行符
}
};
config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;
function getView(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = {},
entry, dirname, basename, pathname, extname;
for (var i = 0; i files.length; i++) {
entry = files[i];
dirname = path.dirname(entry);
extname = path.extname(entry);
basename = path.basename(entry, extname);
pathname = path.join(dirname, basename);
pathname = pathDir ? pathname.replace(new RegExp(‘^’ + pathDir), ”) : pathname;
entries[pathname] = basename;
}
return entries;
}
function getEntry(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = {},
entry, dirname, basename, pathname, extname;
for (var i = 0; i files.length; i++) {
entry = files[i];
dirname = path.dirname(entry);
extname = path.extname(entry);
basename = path.basename(entry, extname);
pathname = path.join(dirname, basename);
entries[basename] = ‘./’ + entry;
}
return entries;
}
function getCommonsChunk(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = [],
entry, dirname, basename, extname;
for (var i = 0; i files.length; i++) {
entry = files[i];
dirname = path.dirname(entry);
extname = path.extname(entry);
basename = path.basename(entry, extname);
entries.push(basename);
}
return entries;
}
全局 安裝webpack 本地工程 怎麼調用
看看webpack官網, 比installation章節, 面介紹安裝webpack.
首先需要安裝全局webpack
npm install webpack -g
才確使用webpack命令
, 前項目面安裝webpack, 官推薦做
npm install webpack –save-dev
自webpack.config.js面便引用webpack
// webpack.config.js
var path = require(‘path’);
var webpack = require(‘webpack’);
使用些plugin候比較便
new webpack.optimize.CommonsChunkPlugin(‘common.js’)
Webpack 怎麼用
1. 為什麼用 webpack?
他像 Browserify, 但是將你的應用打包為多個文件. 如果你的單頁面應用有多個頁面, 那麼用戶只從下載對應頁面的代碼. 當他么訪問到另一個頁面, 他們不需要重新下載通用的代碼.
他在很多地方能替代 Grunt 跟 Gulp 因為他能夠編譯打包 CSS, 做 CSS 預處理, 編譯 JS 方言, 打包圖片, 還有其他一些.
它支持 AMD 跟 CommonJS, 以及其他一些模塊系統, (Angular, ES6). 如果你不知道用什麼, 就用 CommonJS.
2. Webpack 給 Browserify 的同學用
對應地:
browserify main.js bundle.js
webpack main.js bundle.js
Webpack 比 Browserify 更強大, 你一般會用 webpack.config.js 來組織各個過程:
// webpack.config.js
module.exports = {
entry: ‘./main.js’,
output: {
filename: ‘bundle.js’
}
};
這僅僅是 JavaScript, 可以隨意添加要運行的代碼.
3. 怎樣啟動 webpack
切換到有 webpack.config.js 的目錄然後運行:
webpack 來執行一次開發的編譯
webpack -p for building once for production (minification)
webpack -p 來針對發布環境編譯(壓縮代碼)
webpack –watch 來進行開發過程持續的增量編譯(飛快地!)
webpack -d 來生成 SourceMaps
4. JavaScript 方言
Webpack 對應 Browsserify transform 和 RequireJS 插件的工具稱為 loader. 下邊是 Webpack 載入 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpack.config.js
module.exports = {
entry: ‘./main.js’,
output: {
filename: ‘bundle.js’
},
module: {
loaders: [
{ test: /\.coffee$/, loader: ‘coffee-loader’ },
{ test: /\.js$/, loader: ‘jsx-loader?harmony’ } // loaders 可以接受 querystring 格式的參數
]
}
};
要開啟後綴名的自動補全, 你需要設置 resolve.extensions 參數指明那些文件 Webpack 是要搜索的:
// webpack.config.js
module.exports = {
entry: ‘./main.js’,
output: {
filename: ‘bundle.js’
},
module: {
loaders: [
{ test: /\.coffee$/, loader: ‘coffee-loader’ },
{ test: /\.js$/, loader: ‘jsx-loader?harmony’ }
]
},
resolve: {
// 現在可以寫 require(‘file’) 代替 require(‘file.coffee’)
extensions: [”, ‘.js’, ‘.json’, ‘.coffee’]
}
};
5. 樣式表和圖片
首先更新你的代碼用 require() 載入靜態資源(就像在 Node 里使用 require()):
require(‘./bootstrap.css’);
require(‘./myapp.less’);
var img = document.createElement(‘img’);
img.src = require(‘./glyph.png’);
當你引用 CSS(或者 LESS 吧), Webpack 會將 CSS 內聯到 JavaScript 包當中, require() 會在頁面當中插入一個 ｀style標籤. 當你引入圖片, Webpack 在包當中插入對應圖片的 URL, 這個 URL 是由require()` 返回的.
你需要配置 Webpack(添加 loader):
// webpack.config.js
module.exports = {
entry: ‘./main.js’,
output: {
path: ‘./build’, // 圖片和 JS 會到這裡來
publicPath: ”, // 這個用來成成比如圖片的 URL
filename: ‘bundle.js’
},
module: {
loaders: [
{ test: /\.less$/, loader: ‘style-loader!css-loader!less-loader’ }, // 用 ! 來連接多個人 loader
{ test: /\.css$/, loader: ‘style-loader!css-loader’ },
{test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192’} // 內聯 base64 URLs, 限定 =8k 的圖片, 其他的用 URL
]
}
};
6. 功能開關
有些代碼我們只想在開發環境使用(比如 log), 或者 dogfooging 的伺服器裡邊(比如內部員工正在測試的功能). 在你的代碼中, 引用全局變數吧:
if (__DEV__) {
console.warn(‘Extra logging’);
}
// …
if (__PRERELEASE__) {
showSecretFeature();
}
然後配置 Webpack 當中的對應全局變數:
// webpack.config.js
// definePlugin 接收字元串插入到代碼當中, 所以你需要的話可以寫上 JS 的字元串
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || ‘true’)),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || ‘false’))
});
module.exports = {
entry: ‘./main.js’,
output: {
filename: ‘bundle.js’
},
plugins: [definePlugin]
};
然後你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 編譯. 注意一下因為 webpack -p 會執行 uglify dead-code elimination, 任何這種代碼都會被剔除, 所以你不用擔心秘密功能泄漏.
7. 多個進入點(entrypoints)
比如你用 profile 頁面跟 feed 頁面. 當用戶訪問 profile, 你不想讓他們下載 feed 頁面的代碼. 因此你創建多個包: 每個頁面一個 “main module”:
// webpack.config.js
module.exports = {
entry: {
Profile: ‘./profile.js’,
Feed: ‘./feed.js’
},
output: {
path: ‘build’,
filename: ‘[name].js’ // 模版基於上邊 entry 的 key
}
};
針對 profile, 在頁面當中插入 script src=”build/Profile.js”/script. feed 頁面也是一樣.
8. 優化共用代碼
feed 頁面跟 profile 頁面共用不要代碼(比如 React 還有通用的樣式和 component). Webpack 可以分析出來他們有多少共用模塊, 然後生成一個共享的包用於代碼的緩存.
// webpack.config.js
var webpack = require(‘webpack’);
var commonsPlugin =
new webpack.optimize.CommonsChunkPlugin(‘common.js’);
module.exports = {
entry: {
Profile: ‘./profile.js’,
Feed: ‘./feed.js’
},
output: {
path: ‘build’,
filename: ‘[name].js’
},
plugins: [commonsPlugin]
};
在上一個步驟的 script 標籤前面加上 script src=”build/common.js”/script 你就能得到廉價的緩存了.
9. 非同步載入
CommonJS 是同步的, 但是 Webpack 提供了非同步指定依賴的方案. 這對於客戶端的路由很有用, 你想要在每個頁面都有路由, 但你又不像在真的用到功能之前就下載某個功能的代碼.
聲明你想要非同步載入的那個”分界點”. 比如:
if (window.location.pathname === ‘/feed’) {
showLoadingState();
require.ensure([], function() { // 語法奇葩, 但是有用
hideLoadingState();
require(‘./feed’).show(); // 函數調用後, 模塊保證在同步請求下可用
});
} else if (window.location.pathname === ‘/profile’) {
showLoadingState();
require.ensure([], function() {
hideLoadingState();
require(‘./profile’).show();
});
}
Webpack 會完成其餘的工作, 生成額外的 chunk 文件幫你載入好.
Webpack 在 HTML script 標籤中載入他們時會假設這些文件是怎你的根路徑下. 你可以用 output.publicPath 來配置.
// webpack.config.js
output: {
path: “/home/proj/public/assets”, // path 指向 Webpack 編譯能的資源位置
publicPath: “/assets/” // 引用你的文件時考慮使用的地址
}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/235549.html
微信掃一掃 
支付寶掃一掃 