webpack路由
新手用户可能会对路由器设置和使用感到困惑，本文webpack路由将为您提供适用于不同操作系统和设备的路由器设置指南和技巧。
本文目录一览：
- 1、webpack4和webpack3在vue中动态加载路由的区别
- 2、webpack多页面配置，谁有比较全的理解
- 3、webpack中是什么意思？有什么用？如何用
- 4、webpack简单配置，路由配置，接口拦截配置，基本文件配置
- 5、Vue可以不用webpack做路由功能吗
webpack4和webpack3在vue中动态加载路由的区别
在webpack3中加载vue动态路由时是这样的
在webpack3中是支持import这样动态引入路由的。而在webpack4中还使用import的方式引入动态路由则会报错了
欢迎各位大佬指正错误。
webpack多页面配置，谁有比较全的理解
需求
来看下我们的需求:
使用webpack-dev-server做开发时的服务器
在webpack-dev-server里使用路由，访问/a时候显示a.html，/b显示b.html
打包成多个html，给其中引用到资源加md5戳
主要目录结构
├—— src
│ └—— views # 每一个文件夹对应一个页面
│ └—— a
│ └—— index.js
│ └—— b
│ └—— index.js
├—— output # 打包输出的目录
| └—— ...
└—— template.html # 将根据这个模版，生成各个页面的html
└—— webpack.config.js
└—— dev-server.js # webpack-dev-server + express
只列出了主要的目录，这里我们根据一个template.html来生成多个页面的html，他们之间只有引用的资源路径不同。当然，你也可以每个页面单独使用一个html模版。
Webpack 配置
这里主要解决两个小问题。
1. 打包多个页面的js文件
读取src/views下的目录，约定每一个目录当成一个页面，打包成一个js chunk。
2. 打包多个html
循环生成多个HtmlWebpackPlugin插件，把每一个插件的chunks各自指向上面打包的js chunk。
// webpack.config.js
var glob = require('glob');
var webpackConfig = {
/* 一些webpack基础配置 */
};
// 获取指定路径下的入口文件
function getEntries(globPath) {
var files = glob.sync(globPath),
entries = {};
files.forEach(function(filepath) {
// 取倒数第二层(view下面的文件夹)做包名
var split = filepath.split('/');
var name = split[split.length - 2];
entries[name] = './' + filepath;
});
return entries;
}
var entries = getEntries('src/view/**/index.js');
Object.keys(entries).forEach(function(name) {
// 每个页面生成一个entry，如果需要HotUpdate，在这里修改entry
webpackConfig.entry[name] = entries[name];
// 每个页面生成一个html
var plugin = new HtmlWebpackPlugin({
// 生成出来的html文件名
filename: name + '.html',
// 每个html的模版，这里多个页面使用同一个模版
template: './template.html',
// 自动将引用插入html
inject: true,
// 每个html引用的js模块，也可以在这里加上vendor等公用模块
chunks: [name]
});
webpackConfig.plugins.push(plugin);
})
路由配置
在多页应用下，我们希望访问的是localhost:8080/a，而不是localhost:8080/a.html。
由于webpack-dev-server只是将文件打包在内存里，所以你没法在express里直接sendfile('output/views/a.html')，因为这个文件实际上还不存在。还好webpack提供了一个outputFileStream，用来输出其内存里的文件，我们可以利用它来做路由。
注意，为了自定义路由，你可能需要引进express或koa之类的库，然后将webpack-dev-server作为中间件处理。
// dev-server.js
var express = require('express')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')
var app = express();
// webpack编译器
var compiler = webpack(webpackConfig);
// webpack-dev-server中间件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
});
app.use(devMiddleware)
// 路由
app.get('/:viewname?', function(req, res, next) {
var viewname = req.params.viewname
? req.params.viewname + '.html'
: 'index.html';
var filepath = path.join(compiler.outputPath, viewname);
// 使用webpack提供的outputFileSystem
compiler.outputFileSystem.readFile(filepath, function(err, result) {
if (err) {
// something error
return next(err);
}
res.set('content-type', 'text/html');
res.send(result);
res.end();
});
});
module.exports = app.listen(8080, function(err) {
if (err) {
// do something
return;
}
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/" // 引用你的文件时考虑使用的地址
webpack简单配置，路由配置，接口拦截配置，基本文件配置
新建项目
项目脚手架搭建 react
相关文件
webpack.config.js
使用相关插件
path
html-webpack-plugin
html文件处理插件
clean-webpack-plugin
清除上次打包文件插件
copy-webpcak-plugin
打包时需要复制的相关文件的插件（比如一些报表文件模版）
speed-measure-webpack-plugin
速度测量插件 （const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); const webpackConfig = smp.wrap({}）
happypack
一些loader进程管理
打包配置
{
mode:’环境设置’，
entry：‘入口文件设置’，
output：｛path：path.resovle(__dirname,’dist’),filename:’main_[hash].js’,publicPath:’根据环境设置url前缀（接口域名代理字符）’｝，
models：｛rules：［
说明：｛
test：‘正则匹配／.js／’
exclude：‘排除。。。（可以设置后缀名或者文件路径）’
include：‘包含。。。（可以设置后缀名或者文件路径）’
loader：‘loader设置url－loader’或者use：［loader：‘ ’，oprios：｛plugins：［插件设置］或者其他设置｝］（use［可以设置happy pack插件：happypack/loader ? id = ‘happypack插件配置的id’］）
｝
］｝，（loader配置）
（loader配置顺序：如，url-loader,babel-loader,style-loader,css-loader,file-loader）
resolve：｛extensions：［’js’,’json’,’jsx’,’css’］｝，（在导入没有带后缀名的文件时，尝试在文件加入上面后缀名访问）
plugins：［］ （插件配置）
}
bable.config.js
相关插件 (用法function(api){ api.cache(true);
presets：［
[‘@babel/preset-env’，
{‘targets’：｛’browsers’:["last 2 versions”,"safari = 7”,”ie =9”,”chrome =49”]｝}
],
'@babel/preset－react’
］，
return { “plugins”:{
["@babel/plugin-proposal-decorators", { "legacy": true }],(类装饰器 旧：设置legacy时需要loose支持，有顺序)
@babel/plugin-proposal-dynamic-import, （ import 处理插件）
@bacel/plugin-transform-runtime，（将helper和polypill都改为从一个统一的地方引入，引入的对象和全局变量完全隔离）
["@babel/plugin-proposal-class-properties", { "loose" : true }],(解析类的属性)
@ babel / plugin-proposal-logic-assignment-operators, （如出现短路时的逻辑处理插件）
[''@babel/plugin-proposal-optional-chaining'',{loose:false}],(可选链优化 深层嵌套优化处理插件)
[''@babel/plugin-proposal-pipeline-operator'',{proposal:'minimal’}],(解析管道运算符)
['@babel/plugin-proposal-nullish-coalescing-operator'',{loose：false}]，（删除无效的合并运算符）
@ babel / plugin-proposal-do-expressions,( 插件执行一个 do ｛多个条件语句｝表达式，最终语句完成值是该 do 表达式的完成值 )
@ babel / plugin-transform-spread ，（扩展运算符转换插件）
["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }],(转扩展运算插件)
["@babel/plugin-transform-object-assign”]，（插件支持Object.assign()）
［“import”，｛libraryName: 'antd',libraryDirectory: 'es',style: true,｝］（and按需引入设置）
} }})
package.json
项目打包／启动相关插件
webpack－dev－server
webpack－cli
webpack－merga
cross-env (插件解决window系统兼容问题)
postcss.config.js
可以做相关的浏览器版本兼容配置
相关插件
autoprefixer（｛prefer：false，plugin：loader=[request(autoprefixer)({browsers:[‘ie’=9,’Safari’=6]})]｝｝）
public文件
一些公用文件存放
dist文件（打包后的文件）
src文件（项目主文件）
assets文件（存放图片等资源）
api相关文件（api接口处理文件）
modules文件或者pages文件
（store文件）
utils文件
request.js（axios拦截文件）
（相关插件）axios、history（使用：引入createBrowserHistory（现代浏览器使用）、createMemoryHistory（手机端使用））createBrowserHistory（｛basename：‘基链接（环境域名）’，forceRefresh：true ／是否强制刷新整个页面｝）
axios.defaults.withCredentials = true; //设置cross跨域并设置访问权限允许跨域携带cookie信息
拦截设置：
axios.interceptors.request.use(function (config) { return config;（请求参数拦截处理，如：请求头添加token或者其他（config.[‘headers’].token=......））}, function (error) { return Promise.reject(error);});
axios.interceptors.response.use(function (response) { return response;(请求成功返回参数错误处理，如：返回不同状态码跳转不同页面，token失效重登录......)}, function (error) { return Promise.reject(error);（请求失败错误处理，如：登录失效，跳转重新登录）});
history.js（路由环境配置）
配置原理（根据package.json文件里面配置的NODE_ENV==‘production’或者’development’加上webpack.config.js里面的Deserver.proxy设置的代理key来配置开发或者正式环境的url前缀，配合createBrowserHistory.basename设置）
until.js （公用方法文件）
index.js（全局引入，如：utils.request、@babel/polyfill、assets/.peg、路由前缀在路由上全局配置）
routers.js （路由文件）
app.js（正经的组建文件，设置页面大致框架和路由跳转设置，也能做一些全局设置）
index.html（可以做全局引入三方资源）
————————————————————————————————————————
这里的webpack配置是根据webpack4.30版本配置，算不上目前最新版本，配置也比较繁琐，里面用了happypack快速启动快速打包的多线程插件可能会跟你项目的一些配置方式出现冲突。
Vue可以不用webpack做路由功能吗
1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像，所以先安装cnpm（因为速度和稳定性都比较好）
2、在目标文件夹下打开终端
3、执行cnpm install vue-cli -g 全局安装
运行vue查看安装是否成功
4、运行vue init webpack(注：模板名称) sell2(注：项目名称)
5、进入项目文件夹下执行 cnpm install 来安装下载到模板中的package.json中的依赖，安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件
6、由于依赖项非常的多编辑器在检索module文件时会非常的耗内存，所以在用webstorm编辑器启动项目的时候我们往往会在node-module文件夹右键去阻止检索该文件
注：webstorm一打开就卡死了，没办法操作文件夹这种情况的解决方法为，首先在文件夹形式下打开删除node-modules文件夹，然后进行阻止检索的方法，然后在重新cnpm install就好*（这种方法需要安装完依赖项先运行一次然后删除node_modules子文件，webstorm打开项目，禁止检索node_ module文件夹，然后在删除该文件夹，重新安装即可）
7、运行项目执行 npm run dev (注：此时不能用cnpm来运行，必须是npm)
8、将需要的资源放进项目
9、我们需要用到路由功能 所以需要安装vue-router
安装方法：vnpm install vuve-router --save
10、在build/devs-erver.js下编写自定义变量和路由功能
这样在运行项目下就可以得到自己想要的json数据，
这样路由就配置成功，并且得到了自己想要的数据
11、在写代码之前现在html文件下引入初始化样式（保持样式的统一和美观）
12、调用组件的方式
现在，你已经了解了如何设置你的路由器和Wi-Fi，并开始享受无线上网的便利。但是，请记得保护你的网络安全，使用强密码并定期更改密码，以保护你的隐私和数据安全。
