webpack 多页面构建
目标:
- 基于webpack支持react多页面构建(不用gulp,gulp-webpack 构建速度太慢[3]), generator-react-webpack 对单页面支持很好,但对多页面,需要改造
- 提高开发人员的效率
- 并能对项目进行足够的性能优化
- 提高构建的效率
配置文件编写(webpack.config.js)
示例:
var path = require('path');
var glob = require('glob');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var node_dir = path.join(__dirname, './node_modules/');
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 获取所有入口文件
var getEntry = function(globPath) {
var entries = {
vendor: ['jquery','react','react-dom','./src/app'] // 类库
};
glob.sync(globPath).forEach(function(entry) {
var pathname = entry.split('/').splice(-2).join('/').split('.')[0];
entries[pathname] = [entry];
});
console.log(entries);
return entries;
};
// 判断是否是在当前生产环境
var isProduction = process.env.NODE_ENV === 'production';
var entries = getEntry('./src/view/*/*.jsx');
var chunks = Object.keys(entries);
module.exports = {
entry: entries,
output: {
path: path.join(__dirname, './dist'),
filename: isProduction ?'js/[name].[hash:8].js':'js/[name].js',
publicPath: '/dist/',
chunkFilename: 'chunk/[name].chunk.js'
},
module: {
noParse:[
/*path.join(node_dir,'./react/dist/react.min.js'),
path.join(node_dir,'./jquery/dist/jquery.min.js'),
path.join(node_dir,'./react-dom/dist/react-dom.min.js')*/
],
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
},
exclude: node_dir
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract('style', 'css!less')
}, {
test: /\.(png|jpe?g|gif)$/,
loader: 'url?limit=8192&name=img/[hash:8].[ext]'
}, {
//文件加载器,处理文件静态资源
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file?limit=10000&name=fonts/[hash:8].[ext]'
}]
},
resolve: {
extensions: ['', '.js', '.jsx', '.json'],
alias: {
mod: node_dir
}
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery', // 使jquery变成全局变量,不用在自己文件require('jquery')了
jQuery: 'jquery',
React: 'react',
ReactDOM: 'react-dom'
}),
// 类库统一打包生成一个文件
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: isProduction ? 'js/vendor.[hash:8].js':'js/vendor.js',
minChunks: 3 // 提取使用3次以上的模块,打包到vendor里
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new ExtractTextPlugin(isProduction ? 'css/[name].[hash:8].css':'css/[name].css')
],
devtool: isProduction ? null : 'source-map'
};
// 生成HTML文件
chunks.forEach(function(pathname) {
if (pathname == 'vendor') {
return;
}
var conf = {
title: 'My App',
filename: isProduction? '../view/' + pathname + '.html' : pathname + '.html',
template: './src/template.html',
inject: 'body',
minify: {
removeComments: true,
collapseWhitespace: false
}
};
if (pathname in module.exports.entry) {
conf.chunks = ['vendor', pathname];
conf.hash = false;
}
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
});
Webpack的配置主要包括以下几大项目:
entry:js入口源文件
多入口配置
为了使用多入口文件,你可以给entry传入一个对象。对象的key代表入口点名字,value代表入口点。当使用多入口点的时候,需要重载output.filename,否责每个入口点都写入到同一个输出文件里面了。使用[name]来得到入口点名字。
例子:
{
entry: {
a: "./a",
b: "./b",
//支持数组形式,将加载数组中的所有模块,但以最后一个模块作为输出
//该方法可以添加多个彼此不互相依赖的文件
c: ["./c", "./d"]
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].entry.js" // a.enrty.js, b.enrty.js, c.entry.js
}
}
output:生成文件
output参数是个对象,定义了输出文件的位置及名字.
例子:
output: {
path: "dist/js/page",
publicPath: "/output/",
filename: "[name].bundle.js"
} path: 打包文件存放的绝对路径
publicPath: 网站运行时的访问路径
filename:打包后的文件名
module:模块加载器
在webpack中JavaScript,CSS,LESS,TypeScript,JSX,CoffeeScript,图片等静态文件都是模块,不同模块的加载是通过模块加载器(webpack-loader)来统一管理的。loaders之间是可以串联的,一个加载器的输出可以作为下一个加载器的输入,最终返回到JavaScript上。
例子:
module: {
//加载器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
//.js 文件使用 jsx-loader 来编译处理
{
test: /\.js$/,
loader: 'jsx-loader?harmony'
},
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
},
//图片文件使用 url-loader 来处理,小于8kb的直接转为base64
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
}
]
}多个loader可以用在同一个文件上并且被链式调用。链式调用时从右到左执行且loader之间用“!”来分割。
模块加载器(loader)自身可以根据传入不同的参数进行配置。
resolve:文件路径的指向
webpack在构建包的时候会按目录的进行文件的查找,resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀:
例子:
resolve: {
//查找module的话从这里开始查找
root: '/pomy/github/flux-example/src', //绝对路径
//自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
extensions: ['', '.js', '.json', '.scss'],
//模块别名定义,方便后续直接引用别名,无须多写长长的地址
alias: {
AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
plugins:插件,比loader更强大,能使用更多webpack的api
插件一般都是用于输出bundle的node模块。例如,uglifyJSPlugin获取bundle.js然后压缩和混淆内容以减小文件体积。类似的extract-text-webpack-plugin内部使用css-loader和style-loader来收集所有的css到一个地方最终将结果提取结果到一个独立的”styles.css“文件,并且在html里边引用style.css文件。
例子:
var ExtractTextPlugin = require("extract-text-webpack-plugin"); module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
]
},
plugins: [
new ExtractTextPlugin("[name].css")
]code-splitting 插件CommonsChunkPlugin
将多次引用的模块单独打包
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: isProduction ? 'js/vendor.[hash:8].js':'js/vendor.js',
minChunks: 3 // 提取使用3次以上的模块,打包到vendor里
})
多页面 html 生成插件 html-webpack-plugin
例子:
var HtmlWebpackPlugin = require('html-webpack-plugin'); chunks.forEach(function(pathname) {
if (pathname == 'vendor') {
return;
}
var conf = {
title: 'My App',
filename: isProduction? '../view/' + pathname + '.html' : pathname + '.html',
template: './src/template.html',
inject: 'body',
minify: {
removeComments: true,
collapseWhitespace: false
}
};
if (pathname in module.exports.entry) {
conf.chunks = ['vendor', pathname];
conf.hash = false;
}
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
});src目录下有个template.html文件,无需引入任何css和js,webpack会自动帮我们打包引入,
<%= htmlWebpackPlugin.options.title %>
读取配置好的页面标题<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> <%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>
<div id="app"></div>
</body>
</html>最终通过打包,会生成对应入口的html文件,
比如src/view/index/index.js会生成view/index/index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> My App </title>
<link href="/dist/css/vendor.abf9657f.css" rel="stylesheet">
<link href="/dist/css/index/index.abf9657f.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/dist/js/vendor.abf9657f.js"></script>
<script type="text/javascript" src="/dist/js/index/index.abf9657f.js"></script>
</body>
</html>你会发现相关资源文件都自动引入了,十分便捷。
webpack 常用命令
- webpack 最基本的启动webpack命令
- webpack -w 提供watch方法,实时进行打包更新
- webpack -p 对打包后的文件进行压缩
- webpack -d 提供SourceMaps,方便调试
- webpack --colors 输出结果带彩色,比如:会用红色显示耗时较长的步骤
- webpack --profile 输出性能数据,可以看到每一步的耗时
- webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块
webpack dev server
配置示例:
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js'); for (var i in config.entry) {
// 每个入口文件加入 client websocket 热加载脚本
config.entry[i].unshift(
"webpack-dev-server/client?http://127.0.0.1:3000/",
"webpack/hot/only-dev-server"
);
}
config.module.loaders.unshift({
test: /\.jsx?$/,
loader: 'react-hot',
exclude: /node_modules/
});
config.plugins.push(new webpack.HotModuleReplacementPlugin());
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
stats: { colors: true }
}).listen(3000, '127.0.0.1', function (err, result) {
if (err) {
console.log(err);
}
console.log('server start');
});用处
- 开启服务器调试环境
- 解决以下两个问题:
- webpack --watch 打包速度慢
- 不能做到hot replace
配置
Content Base
如果不进行设定的话,服务器伺服默认是在当前目录下。
命令行设置
webpack-dev-server --content-base build/
webpack 配置
devServer: {
contentBase: './src/',
historyApiFallback: true,
hot: true,
port: defaultSettings.port,
publicPath: '/assets/',
noInfo: false
}
publicPath
- webpack server 伺服的 bundle 是在内存中的,其相对路径由 publicPath 字段指定。
- 如果用以上的配置,bundle 可以通过地址 localhost:8080/assets/bundle.js 访问到。(注意:访问的不是output目录下的文件而是内存中的数据!)
自动更新和热替换
配置:
var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
hot: true
...
});
server.listen(8080);关键配置:
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
在每个入口文件注入 client websocket 热加载脚本。
webpack 多页面构建的更多相关文章
- vue webpack多页面构建
项目示例地址: https://github.com/ccyinghua/webpack-multipage 项目运行: 下载项目之后 # 下载依赖 npm install # 运行 npm run ...
- webpack 多页面支持 & 公共组件单独打包
webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...
- 使用webpack+vue.js构建前端工程化
参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...
- 使用Vue和djangoframwork完成登录页面构建 001
使用Vue和djangoframwork完成登录页面构建 001 环境的搭建 首先,我在我的电脑的F盘创建了一个文件夹 forNote,进入到这个文件夹中 F:\forNote> vue环境的搭 ...
- webpack多页面应用打包问题-新增页面打包JS影响旧有JS资源
webpack多页面应用打包问题:如果在项目里新增页面,pages目录中插入一个页面文件,然后打包代码,在webpack3中,新增页面文件上方文件打包出来的JS文件内容全部会改变,点击查看比对,发现问 ...
- 完美解决Webpack多页面热加载缓慢问题【转载】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/localhost_1314/article ...
- vue-cli + webpack 多页面实例应用
关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架.它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.使用vue可以给你的开发带来极致的编程体验. 关于vu ...
- webpack 多页面|入口支持和公共组件单独打包--转载
转载自:http://www.jb51.net/article/117490.htm 本篇主要介绍:如何自动构建入口文件,并生成对应的output:公共js库如何单独打包. 多入口文件,自动扫描入口. ...
- webpack前端自动化构建工具
博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 本人最 ...
随机推荐
- 串口通信—USB转串口
如何使用c库printf
- 001_centos7下比特币源码编译安装
今天我们介绍比特币的源码安装过程,是利用编译安装的 首先安装依赖 yum install -y boost-devel qt-devel protobuf-devel qrencode-devel l ...
- C++/C socket编程
目录 socket()函数 何为socket Internet套接字 流格式套接字SOCK_STREAM 数据报格式套接字SOCK_DGRAM TCP/IP协议族 创建套接字 加载套接字库 Windo ...
- 2020-04-28:工作中如何解决MQ消息堆积和消息重复的问题?
福哥答案2020-04-28:此答案来自群员,感谢群员支持. 消息堆积 只能考虑 增多消费者 以及后端其他服务 组件的吞吐能力 别的有办法吗 如果更彻底一点 分撒单个队列里的消息 队列 更分门别类 或 ...
- 2020-04-23:假设一个订单的编号规则是AAAAOrder2020-0000001,AAAAOrder2020-0000002....后面的数字是自增长,如果订单号码达到AAAAOrder2020-1000000(100万),数据库中应该有100万条数据,此时我随机删除2条数据(物理删除,且不考虑日志和备份),请问怎么找到删掉的数据的编号?给出解题思路即可,答案需要在1秒内运行得到。
福哥答案2020-04-23: 分批查询:分成500次count(),每次count()肯定小于等于2000条数据,经过测试,一次count()在.1ms左右,500次就是500ms.二分法(时间微超 ...
- asp.netcore 3.1 program、Startup 类详解
Program类 public class Program { /// <summary> /// 应用程序入口 /// 1.asp.netcore 本质上是控制台程序 /// </ ...
- vue cli3.0使用svg全过程
VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html 1.安装依赖 npm i ...
- JavaScript 基础三
遍历对象的属性 for...in 语句用于对数组或者对象的属性进行循环操作. for (变量 in 对象名字) { 在此执行代码 } 这个变量是自定义 符合命名规范 但是一般我们 都写为 k 或则 k ...
- Eclipse怎么切换工作空间
1.进行点击Eclipse编辑代码的窗口界面中,进行点击菜单中file的选项. 2.弹出了下拉菜单中进行选择为“switch workspace”的选项. 3.弹出了下一级菜单中进行选择为other的 ...
- vue watch 和 computed 区别与使用
目录 computed 和 watch 的说明 与 区别 computed 计算属性说明: watch 监听属性说明: watch 和 computed 的区别是: 使用 参考官方文档 compute ...