[S3-E441]Webpack 2: 生产力工具
Posted 前端JavaScript
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[S3-E441]Webpack 2: 生产力工具相关的知识，希望对你有一定的参考价值。
命令行
命令行方式是最简单的方式, 如果项目只是纯Web前端, 使用这种方式是最便捷的. 只需要在package.json文件中的scripts里面添加下面一行就可以了.
直接命令行:
webpack-dev-server --content-base=www --inline --watch --hot --progress --config webpack.config.js
通过 npm run dev 或 yarn run dev:
// package.json
"scripts": {
"dev": "webpack-dev-server --content-base=www --inline --watch --hot --progress --config webpack.config.js",
...
},
参数说明:
--content-base: 静态资源的目录, 为 output.path 设置的目录.
output: {
path: path.resolve(__dirname, 'dist'),
},
--watch: 监视模式, Web执行完打包后不退出, 一直监听文件变化, Ctrl + S后自动构建变化的模块, 及其依赖模块.
--hot: 开启模块热替换.
--progress: 显示进度
--config: 指定配置文件 webpack.config.js 为默认文件名.
Webpack API
API的方式需要对webpack.config.js配置文件进行修改, 增加HotModuleReplacementPlugin插件.
Webpack 1.x
const path = require('path');
const webpack = require('webpack');
module.exports = {
context: path.join(__dirname, 'js'),
entry: [
'./index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080/',
],
output: {
path: path.join(__dirname, 'www'),
filename: 'bundle.js',
publicPath: '/',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
};
Webpack 2.x
Webpack 2.x 需要一个额外配置 .babelrc, 增加 react-hot-loader/babel:
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"react-hot-loader/babel"
]
}
webpack.config.js 模块加载器的配置, 和Webpack 1.x是不同的:
rules: [
// javascript模块加载器
{
test: /\.js|jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory : true,
presets: [
['es2015', {modules: false}]
],
// ES7
plugins: [
// 模块动态导入
'syntax-dynamic-import',
'transform-async-to-generator',
'transform-regenerator',
// 运行时转换
'transform-runtime'
]
}
}
},
中间件
需要编写一个Express服务器, 并且把 webpack-dev-middleware 集成到自己的服务器中. 多用于需要高度定制的场景, 实际上之前的webpack-dev-server就是使用的 webpack-dev-middleware 来实现的, 这里可以证明（https://github.com/webpack/webpack-dev-server/blob/master/package.json#L25）.
const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');
const app = express();
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
// 启用热更
hot: true,
filename: 'bundle.js',
publicPath: '/assets/',
stats: {
colors: true,
},
// 路由需要的
historyApiFallback: true,
}));
app.use(webpackHotMiddleware(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000,
}));
app.get('/', function(req, res) {
res.send('<body>Hello World<script src=\'assets/bundle.js\'></script></body>');
});
const server = app.listen(3000, function() {
const host = server.address().address;
const port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
对于这种形式的热更, 需要配合使用 webpack-hot-middleware.
Javascript 模块的热替换
需要在入口文件里面添加 module.hot.accept 配置, 下面给出入口文件的完整代码:
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router
Route,
Link
} from 'react-router-dom'; // React Router v4 版本.
import App from './App';
import { AppContainer } from 'react-hot-loader';
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('App')
);
}
render(App);
if (module.hot) {
module.hot.accept('./App', () => { render(App) });
}
原先直接挂载App, 要使用HMR, 需要在外层包一个<AppContainer>容器.
多端同步刷新
这个视频(https://v.qq.com/x/page/v03988jcvs6.html), 是Chrome, Safari, Firefox 三端同步操作的示例.
对于需要支持全平台(移动, 桌面, Web)的开发, 可以使用 BrowerSync 这个神器. 它通过 Websocket 同步事件.
首先, 把模块包含进来:
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
其次, 配置插件:
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
// server: { // 独立服务器模式, 这里我使用的代理模式, 注释掉了
// baseDir: ['dist'] // 监视的目录, 其中如果文件发生变化, 刷新页面
// },
proxy: 'http://localhost:8080/'
}, {
name: 'dev',
reload: false // 不让 BrowerSync 刷新页面, 让 webpack-dev-server 管理页面是否需要刷新.
}),
这里我使用代理模式, 因为除了 BrowerSync 的功能外, 我还要使用 webpack-dev-server HMR功能. 具体配置参考: https://github.com/Va1/browser-sync-webpack-plugin
参考:
https://github.com/search?utf8=%E2%9C%93&q=webpack-hot-middleware&type=
https://github.com/webpack/webpack-dev-middleware
https://github.com/glenjamin/webpack-hot-middleware
http://acgtofe.com/posts/2016/02/full-live-reload-for-express-with-webpack
https://github.com/Va1/browser-sync-webpack-plugin
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
更多文章点击 查看（或在导航菜单中查看）
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
====================
以上是关于[S3-E441]Webpack 2: 生产力工具的主要内容，如果未能解决你的问题，请参考以下文章
使用vue-cli构建 webpack打包工具时，生产环境下，每次build时，删除dist目录，并重新生成，以防dist目录文件越来越多。