有关于webpack官方文档的粗略学习，暂时告一段落，关于webpack是如何将项目整体构建包括代替gulp和grunt的打包功能，有待在实际项目中更深一步的实践。毕竟已经有一段时间不用了，知识在于巩固，不巩固是真的会生疏的，而且webpack4新鲜出炉，号称实现零配置。而且最近后天同学在进行关于spring boot 和spring cloud的学习，据了解也是零配置。感觉技术虽然越来越多，但是“懒人”还是大有人在，俗话说懒促进了世界的发展。那么，下次研究webpack4之后再来分解。
一下是关于上次webpack笔记的更新：
webpack
应用程序静态模块打包器
webpack-dev-server 为你提供了一个简单的web服务器，并且能够实时重新加载，
npm install —save-dev webpack-dev-server
当使用 webpack dev server 和 Node.js API 时，不要将 dev server 选项放在 webpack 配置对象(webpack config object)中。而是，在创建选项时，将其作为第二个参数传递
const webpackDevServer = require(‘webpack-dev-server‘); // 服务依赖
const webpack = require(‘webpack’); // webpack依赖
const config = require(‘./webpack.config.js‘); // webpack的config依赖
const options = { dev-server的配置
contentBase: ‘./dist‘,
hot: true,
host: ‘localhost‘
};
webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);
server.listen(5000, ‘localhost‘, () => {
console.log(‘dev server listening on port 5000‘);
});
webpack的开发和生产环境是不同的，开发环境要去有强大的实时重新加载模块和热替换模块，生产环境要求更快的加载时间，更优化的资源应用。
但是还是要遵循DRY原则：
webpack-demo
|- package.json
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
|- /dist
|- /src
|- index.js
|- math.js
|- /node_modules
依据此项目目录，我们提取出开发环境和生产环境公共的代码，
webpack.common.js:
+ const path = require(‘path‘);
+ const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
+ const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
+
+ module.exports = {
+ entry: {
+ app: ‘./src/index.js‘
+ },
+ plugins: [
+ new CleanWebpackPlugin([‘dist‘]),
+ new HtmlWebpackPlugin({
+ title: ‘Production‘
+ })
+ ],
+ output: {
+ filename: ‘[name].bundle.js‘,
+ path: path.resolve(__dirname, ‘dist‘)
+ }
+ };
webpack.dev.js:
+ const merge = require(‘webpack-merge‘);
+ const common = require(‘./webpack.common.js‘);
+
+ module.exports = merge(common, {
+ devtool: ‘inline-source-map‘,
+ devServer: {
+ contentBase: ‘./dist‘
+ }
+ });
webpack.prod.js:
+ const merge = require(‘webpack-merge‘);
+ const UglifyJSPlugin = require(‘uglifyjs-webpack-plugin‘);
+ const common = require(‘./webpack.common.js‘);
+
+ module.exports = merge(common, {
+ plugins: [
+ new UglifyJSPlugin()
+ ]
+ });
防止重复的CommonsChunkPlugin
CommonsChunkPlugin的另一个少有人知道的功能是，能够在修改的构建结果中，将webpack的样板（bolierplate）和manifest提取出来。通过enter配置中未用到的名称，此插件会自动将我们需要的内容提取到单独的包中
ExtractTextPlugin ：将css从主应用程序中分离
bundle-loader ： 用于分离代码和延迟加载生成的bundle
promise-loader ：类似于bundle-loader ：但使用的是promises
动态导入：
1 import （会调用到内部的promises）
polyfill 垫片 支持新的javascript代码，不支持新的api
懒加载/按需加载
缓存：
在部署新版本时，不更改资源文件的名字的话，浏览器就认为此文件没有被更新，就会使用它的缓存版本。通过output.filename进行文件名的更改，可以确保浏览器获取到修改后的文件
hash替换可以用于在文件名中包含一个构建相关的(build-specific)的hash，但是更好的方式是使用chunkhash替换，在文件名中包含一个（chunk-specific）的哈希
创建library
除了打包应用程序代码，webpack还用于打包js library
typeSctript
module.export = {
entry : ‘./src/index.ts’,
module : {
rules : [
test : /\.tsx?$/,
use : ‘ts-loader’,
exclude : /node-modules/
]
},
resolve : {
extensions : [‘.tsx’,’.ts’,’.js’]
},
output : {
filename ： ‘bundle.js’,
path :path.resolve(__dirname ,’dist’)
}
}
渐进式网络应用程序（Progressive Web Application）
可以做很多事情，最重要的事是可以在离线时继续运行。这是使用名为Service Workers的网络技术来实现的
——service workers（服务工作线程，走的不同于页面的js线程）
是浏览器在后台独立与网页运行的脚本。这些脚本应用与不需要网页的用户交互功能。现在他包括推送通知和后台同步的功能，将来，服务工作线程会支持定期同步和地理围栏的功能。本教程讨论的核心功能是拦截和处理网络请求，包括通过程序来管理缓存中的响应。
首次实施服务工作线程时，可以通过chrome://serviceworker-internals 来查看服务工作线程详情。
最终实现的是，停止服务器然后刷新，仍然可以查看应用程序正常运行
1添加workbox
添加workbox-webpack-plugin插件：npm install workbox-webpack-plugin —save-dev
webpakc.config.js里面添加
const WorkboxPlugin = require(‘workbox-webpack-plugin‘);
以及在插件plugin里面添加 new WorkboxPlugin（
clientsClaim ：true,
skipWaiting :true
）
webpack的迁移*
管理依赖 es6modules commonjs amd
公共路径：
publicpath
原文地址：https://www.cnblogs.com/wyliunan/p/8509366.html