Webpack之“多頁面開發”最佳實戰
阿新 • • 發佈：2017-05-08
初始 local warn func ron 列表 大小 turn one
前言：相信之前看過這篇文章，前端構建工具之“Webpack”的朋友，對於Webpack有了一定的了解。那麽今天就跟大家分享下：如何利用webpack，來進行多頁面項目實戰開發。
一、項目初始化安裝
1、先安裝node.js 和 webpack
第一步:如果沒有安裝node的朋友,可以去node中文官網下載。安裝好後，打開cmd工具，輸入:
| 1 |
node - v // 如果有顯示內容則證明安裝成功(這是看我們node版本的指令) 如下圖：
|
第二步: 全局安裝webpack
| 1 |
npm install webpack -g
|
2、配置package.json 如果沒有,可以初始化安裝
| 1 |
npm init
|
npm是node.js的一個包管理工具。(項目中所需要用到的包,都會放在node_modules文件夾下)
3、初始化package.json,添加項目所需要的模塊
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
"devDependencies": {
"babel": "^6.3.13",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"babel-runtime": "^5.8.34",
"clean-webpack-plugin": "^0.1.10",
"copy-webpack-plugin": "^3.0.1", "css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"glob": "^7.0.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"imports-loader": "^0.6.5",
"jquery": "^1.12.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
|
4、安裝模塊
| 1 |
npm install //打開cmd命名行，進入到文件夾，進行下載項目開發所需要的模塊
|
二、搭建項目結構
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
- demo
- src #代碼開發目錄
- less #css目錄,按照頁面(模塊)、通用、第三方三個級別進行組織
+ common
+ index.less
+ aboout.less
+ list.less
...
+ images #圖片資源
- js #JS腳本,按照page、components進行組織
+ index.js
+ about.js
+ list.js
...
index.html #HTML模板
about.html
list.html
- dist #webpack編譯打包輸出目錄,無需建立目錄可由webpack根據配置自動生成
+ css
+ js
+images
index.html
about.html
list.html
+ node_modules #所使用的nodejs模塊
package.json #項目配置
webpack.config.js #webpack配置
|
三、webpack相關配置
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
var path = require(‘path‘);
var glob = require(‘glob‘);
var webpack = require(‘webpack‘);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);//將你的行內樣式提取到單獨的css文件裏,
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘); //html模板生成器
var CleanPlugin = require(‘clean-webpack-plugin‘); // 文件夾清除工具
var CopyWebpackPlugin = require(‘copy-webpack-plugin‘); // 文件拷貝
var config = {
entry: { //配置入口文件,有幾個寫幾個
index: ‘./src/js/index.js‘,
list: ‘./src/js/list.js‘,
about: ‘./src/js/about.js‘
},
output: {
path: path.join(__dirname, ‘dist‘), //打包後生成的目錄
publicPath: ‘‘,//模板、樣式、腳本、圖片等資源對應的server上的路徑
filename: ‘js/[name].[hash:6].js‘,//根據對應入口名稱,生成對應js名稱
chunkFilename: ‘js/[id].chunk.js‘ //chunk生成的配置
},
resolve: {
root: [],
//設置require或import的時候可以不需要帶後綴
extensions: [‘‘, ‘.js‘, ‘.less‘, ‘.css‘]
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(‘style‘, ‘css‘)
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(‘css!less‘)
},
{
test: /\.js$/,
loader: ‘babel‘,
exclude: /node_modules/,
query:{
presets: [‘es2015‘]
}
},
{
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: ‘file-loader?name=./fonts/[name].[ext]‘
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: ‘url‘,
query: {
limit: 30720, //30kb 圖片轉base64。設置圖片大小,小於此數則轉換。
name: ‘../images/[name].[ext]?‘ //輸出目錄以及名稱
}
}
]
},
plugins: [
new webpack.ProvidePlugin({ //全局配置加載
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new CleanPlugin([‘dist‘]),// 清空dist文件夾
new webpack.optimize.CommonsChunkPlugin({
name: ‘common‘, // 將公共模塊提取,生成名為`vendors`的chunk
minChunks: 3 // 提取至少3個模塊共有的部分
}),
new ExtractTextPlugin( "css/[name].[hash:6].css"), //提取CSS行內樣式,轉化為link引入
new webpack.optimize.UglifyJsPlugin({ // js壓縮
compress: {
warnings: false
}
}),
new CopyWebpackPlugin([
{from: ‘./src/images‘, to: ‘./images‘} //拷貝圖片
])
],
externals: {
$: ‘jQuery‘
},
//devtool: ‘#source-map‘,
//使用webpack-dev-server服務器,提高開發效率
devServer: {
// contentBase: ‘./‘,
host: ‘localhost‘,
port: 8188, //端口
inline: true,
hot: false,
}
};
module.exports = config;
var pages = Object.keys(getEntry(‘./src/*.html‘));
var confTitle = [
{name: ‘index‘, title: ‘這是首頁標題‘},
{name: ‘list‘, title: ‘這是列表標題‘},
{name: ‘about‘, title: ‘這是關於我標題‘}
]
//生成HTML模板
pages.forEach(function(pathname) {
var itemName = pathname.split(‘src\\‘) //根據系統路徑來取文件名,window下的做法//,其它系統另測
var conf = {
filename: itemName[1] + ‘.html‘, //生成的html存放路徑,相對於path
template: pathname + ‘.html‘, //html模板路徑
inject: true, //允許插件修改哪些內容,包括head與body
hash: false, //是否添加hash值
minify: { //壓縮HTML文件
removeComments: true,//移除HTML中的註釋
collapseWhitespace: false //刪除空白符與換行符
}
};
conf.chunks = [‘common‘, itemName[1]]
for (var i in confTitle) {
if (confTitle[i].name === itemName[1]) {
conf.title = confTitle[i].title
}
}
config.plugins.push(new HtmlWebpackPlugin(conf));
});
//按文件名來獲取入口文件(即需要生成的模板文件數量)
function getEntry(globPath) {
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[pathname] = ‘./‘ + entry;
}
return entries;
}
|
四、頁面開發
在我們的開發目錄,新建所需要的頁面, 以index.html 為例子:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="baidu-site-verification" content="wczeFssEiy" />
<meta http-equiv="Cache-Control" content="no-transform " />
<meta http-equiv="Cache-Control" content="no-siteapp" />
</head>
<body>
<div id="test">
這是首頁
<p>
這是一個段落說明!
</p>
</div>
</body>
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
CSS:
@charset "utf-8";
/*
* @description: 首頁
* @author: duanliang
* @updateTime: 2016-9-3
*/
/*變量定義*/
@width: 500px;
@color: #333;
@fontSize: 16px;
#test {
width: @width;
height:100px;
border:1px solid #ccc;
color: @color;
font-size: @fontSize;
margin:30px auto;
p.info {
background-color:#f34;
color: @color;
}
}
|
| 1 2 3 4 5 6 |
Javascript:
//引入css
require("../less/global");
require("../less/index");
$(‘body‘).append(‘這是js動態生成的內容:這是index頁面!‘)
|
直接運行命令: npm run dev 指令，不出意外。直接訪問http://localhost:8188/ 即可看到如下效果:
因為之前,就把運行命令寫在package.json中
| 1 2 3 4 |
"scripts": {
"dev": "webpack-dev-server --progress --colors --inline", //開發模式
"build": "webpack -p" // 編譯打包
}
|
可能有些朋友會好奇，為什麽在我們HTML模板中，沒有寫入任何CSS、JS鏈接。為什麽可以在運行時候看到效果呢？
那是因為webpack幫我做了這一切，它會自動幫我們註入到模板裏面。
接下來,我們運行下 npm run build 指令,看生成的頁面時候一個什麽樣子?
Github下載: 點擊下載
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
使用方式：
1、下載後，解壓安裝包。
2、打開cmd命名行，進入到解壓目錄。
3、輸入指令 npm install 安裝項目所依賴的包
4、安裝成功，運行指令 npm run dev
5、運行成功。瀏覽器輸入：http://localhost:8188/ 即可看到效果
備註：頁面切換的話，直接域名+頁面名稱即可。
比如： http://localhost:8188/index.html //首頁
http://localhost:8188/about.html //關於我頁面
http://localhost:8188/list.html //列表頁面
|
寫在最後：可能有了解前端構建工具的朋友，會提出這樣的問題：“webpack與gulp的區別是什麽?”其實這兩者根本就不是一個類型的東西，所以就沒有可比性。前者專註於資源模塊化加載打包，推崇“一切皆模塊”的理論。後者，則專註於構建。具體區別，可以自行百度(谷歌)。不過吐槽一下：webpack處理圖片確實有點弱，不過這也跟它本身有點關系。如果需要對圖片進行優化處理的朋友，可以采用gulp+webpack的方式來構建你的項目。
寫文章不易，看似簡單，仍需花非時間和精力。我想這可能也是很多人沒有堅持寫博客原因吧！
溫習提示：由於最近前端MVVM框架火熱，後續計劃分享一些關於vue.js相關的知識。喜歡的朋友，可以關註下博客，更新時間待定！
如果寫的文章，對你幫助，記得打賞哦！哈哈...
本文出自段亮博客，如需轉載請註明出處。
本文出處:http://www.duanliang920.com/learn/web353.html
Webpack之“多頁面開發”最佳實戰