Question

webpack多页面怎么使用

Answer 1

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 –inline&webpack -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的插件，
具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
*/
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=5000&name=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;
}