webpack打包后引用cdn的js_webpack入门
内容提纲：
- electron-vue项目中的webpack工程实例
- 思考
- webpack与gulp/grunt
- HMR
electron-vue项目中的webpack工程实例
从electron-vue项目中的实际使用例子来入手
如下是 webpack.renderer.config.js 文件
'use strict'
process.env.BABEL_ENV = 'renderer'
const path = require('path')
const { dependencies } = require('../package.json')
const webpack = require('webpack')
const BabiliWebpackPlugin = require('babili-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
let whiteListedModules = ['vue']
let rendererConfig = {
/**
* 控制打包后代码的形式，影响调试。当前设置为cheap-module-eval-source-map，调试时仅可看到原始源代码
*（仅限行），如果同时使用了代码压缩插件，代码被合成一行，将无法获取有效的调试内容。
*/
devtool: '#cheap-module-eval-source-map',
/**
* webpack处理项目的入口文件，以该文件作为构建其内部依赖图的开始。
* 通常是项目的 index 或 main 文件
* 注意 entry 可以是一个数组，即 webpack 可以处理多个入口文件，将其
*/
entry: {
renderer: path.join(__dirname, '../src/renderer/main.js')
},
/**
* 声明外部依赖，在此声明的文件，即使在工程中使用import引入，也不会被打到bundle中。
* 一般我们会把package.json中的dependencies排除在外。
* 当我们需要使用cdn引用第三方库时，我们也要将其放在external中，比如使用jquery cdn
* 思考1：node_modules中的三方库被排除在打包的bundle文件外，为什么我们的程序在打包后仍然能够使用
* 三方库
*/
externals: [
...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
],
/**
* 模块是 webpack 的核心，webpack 帮我们把文件打包成模块，然后我们就可以使用 import 的方式来
* 使用。webpack 通过 loader 来各种处理文件，因此我们可以在项目中使用模块化的方法引用任何类型的文件
*/
module: {
rules: [
{
/**
* test 做正则匹配，所有符合该匹配规则的文件都将应用该 loader 规则
*/
test: /.(js|vue)$/,
/**
* enfore 用来定义规则的执行顺序，取值 ['pre', 'post']，此处为 pre，将在所有 loader 执行前
* 执行。即在所有 loader 规则之前，使用 eslint-loader 对代码做静态检查
*/
enforce: 'pre',
/**
* exclude 排除不想应用该规则的目录
*/
exclude: /node_modules/,
/**
* useEntry 配置loader
*/
use: {
loader: 'eslint-loader',
options: {
formatter: require('eslint-friendly-formatter')
}
}
},
{
test: /.css$/,
/**
* ExtractTextPlugin 插件，用于将 *.css 分离到单独的 style.css 文件中，而不是作为样式
* 放入 bundle.js 文件中
* fallback 是当 CSS 没有被提取时应用的 loader
* style-loader 的作用是使用 标签将样式添加到页面 dom 中
*/
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /.scss$/,
/**
* 不同于 use 的形式，loader 写成内联的方式
* 执行顺序是“从右到左，从下到上“，即 sass-loader -> css-loader -> vue-style-loader
* loader 之间通过 ! 分隔，如果需要为 loader 配置参数，则可以使用 ?key=value&foo=bar 的形
* 式，类似于 url 的参数。
*/
loader: 'vue-style-loader!css-loader!sass-loader'
},
{
test: /.html$/,
use: 'vue-html-loader'
},
{
test: /.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /.json$/,
use: 'json-loader'
},
{
test: /.node$/,
use: 'node-loader'
},
{
test: /.vue$/,
use: {
loader: 'vue-loader',
options: {
extractCSS: process.env.NODE_ENV === 'production',
loaders: {
/**
* 带参数的 loader
*/
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
scss: 'vue-style-loader!css-loader!sass-loader'
}
}
}
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
use: {
loader: 'url-loader',
/**
* query 老的写法，等同于 options
*/
query: {
limit: 10000,
name: 'imgs/[name].[ext]'
}
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
use: {
loader: 'url-loader',
query: {
limit: 10000,
name: 'fonts/[name].[ext]'
}
}
},
{
test: /.(ogg)$/,
use: 'file-loader'
}
]
},
plugins: [
new ExtractTextPlugin('styles.css'),
/**
* HtmlWebpackPlugin 这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文
* 件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）
* 当我们发布一个网站应用时，我们需要通过生成带 hash 值的文件名来更新浏览器对静态文件的缓存
* 这样会有一个问题，我们每次使用 webpack 打包后都需要手动修改 index.html 文件中引用的
* bundle.[hash].js 文件名，显然很麻烦。
* HtmlWebpackPlugin 的引入就是为了解决此问题，通过配置一个 index 模板，webpack 会在每次打包完成
* 后，将 bundle.[hash].js 的引用注入 index.html 中
*/
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: process.env.NODE_ENV !== 'production'
? path.resolve(__dirname, '../node_modules')
: false
}),
/**
* HotModuleReplacementPlugin webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需
* 进行页面刷新。使用 HMR 的方法：
* 1.在webpack配置文件中添加HMR插件；
* 2.在Webpack Dev Server中添加“hot”参数； 在我们的electron-vue应用中使用了接口调用的方式，查看
* dev-runner.js 文件
*/
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
/**
* 自动加载模块，并定义到全局变量，随时可以引用。相当于 import 了一个全局对象
* new webpack.ProvidePlugin({
* identifier: 'module1',
* identifier: ['module1', 'property1'],
* // ...
* });
* 任何时候，当 identifier 被当作未赋值的变量时，module 就会自动被加载，并且 identifier 会被这个
* module 输出的内容所赋值。
* 支持支持命名导出，如我们想全局使用 _.map 这个方法，那么我们可以这样来引入:
* new webpack.ProvidePlugin({
* _map: ['lodash', 'map']
* });
* 在项目中即可以使用 _map 来使用 _.map 方法
*/
new webpack.ProvidePlugin({
jQuery: "jquery",
jquery: "jquery",
$: "jquery",
"window.jQuery": "jquery"
})
],
/**
* 定义打包文件名，[name] 参数由 entry 中的key决定，此处为render.js
* 这里文件名没有使用 hash 值，是因为在 electron 项目中，升级不需要考虑浏览器缓存的问题，整个应用都会
* 被替换
*/
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: path.join(__dirname, '../dist/electron')
},
/**
* 在此可以定义 import 或 require 的别名，来确保模块引入变得更简单。
* 当目录下的文件没有文件后缀时，使用 extensions 中的后缀依次尝试解析
*/
resolve: {
alias: {
'@': path.join(__dirname, '../src/renderer'),
'vue$': 'vue/dist/vue.esm.js',
'config' : path.join(__dirname, '../config'),
'components': path.join(__dirname, '../src/renderer/components'),
'utils': path.join(__dirname, '../src/renderer/utils'),
'renderer': path.join(__dirname, '../src/renderer'),
'services': path.join(__dirname, '../src/renderer/services'),
'store': path.join(__dirname, '../src/renderer/store'),
'router': path.join(__dirname, '../src/renderer/router'),
'plugins': path.join(__dirname, '../src/renderer/plugins'),
'css': path.join(__dirname, '../src/renderer/css'),
'images': path.join(__dirname, '../src/renderer/images'),
'jquery': path.join(__dirname, '../node_modules/jquery/src/jquery')
},
extensions: ['.js', '.vue', '.json', '.css', '.node']
},
/**
* 构建目标, https://webpack.docschina.org/configuration/target
*/
target: 'electron-renderer'
}
/**
* Adjust rendererConfig for development settings
*/
if (process.env.NODE_ENV !== 'production') {
/**
* DefinePlugin 允许创建一个在编译时可以配置的全局常量。
* 比如定义后端接口的url
* https://webpack.docschina.org/plugins/define-plugin/
*/
rendererConfig.plugins.push(
new webpack.DefinePlugin({
'__static': `"${path.join(__dirname, '../static').replace(//g, '')}"`
})
)
}
/**
* Adjust rendererConfig for production settings
*/
if (process.env.NODE_ENV === 'production') {
rendererConfig.devtool = ''
rendererConfig.plugins.push(
/**
* 这是一款基于 Babel 的压缩工具，支持 es6 的一些特性，取代 UglifyJS
*/
new BabiliWebpackPlugin({
removeConsole: true,
removeDebugger: true
}),
/**
* Copies individual files or entire directories to the build directory.
* 一般会使用插件把需要使用的静态文件考到构建后对应的目录
*/
new CopyWebpackPlugin([
{
from: path.join(__dirname, '../static'),
to: path.join(__dirname, '../dist/electron/static'),
ignore: ['.*']
}
]),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
/**
* 用于 webpack2 对 webpack1 配置的兼容，抹平差异
*/
new webpack.LoaderOptionsPlugin({
minimize: true
})
)
}
module.exports = rendererConfig
思考1：external
node_modules中的三方库被排除在打包的bundle文件外，为什么我们的程序在打包后仍然能够使用三方库
// package.json
{
...
"build": {
...
"files": [
"dist/electron",
"node_modules/",
"package.json"
]
}
}
在 package.json 文件中，配置了 files 文件，electron-build 在打包时会将 files 中的文件夹全部打包到工程中，即 resources/app.asar 文件
我们使用命令查看
asar list ./resources/app.asar可以看到如下一系列文件
/node_modules/argparse/lib/action/store/false.js
/node_modules/argparse/lib/action/store/true.js
/node_modules/argparse/lib/action/append
/node_modules/argparse/lib/action/append/constant.js
...
/dist
/dist/electron
/dist/electron/index.html
/dist/electron/main.js
/dist/electron/renderer.js
/dist/electron/static/update/process.html
/dist/electron/static/update/process.js
/dist/electron/static/update/libs
...
/dist/electron/fonts
/dist/electron/fonts/element-icons.ttfwebpack与gulp/grunt
Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具
Grunt和Gulp的工作方式
在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Webpack的工作方式是
把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件。
开发模式热更新
开发模式热更新分为两部分：
- 监控代码修改，并自动重新编译打包
- 通知浏览器同步修改的内容（注意，不是刷新浏览器重新加载，是动态替换部分代码，保持原页面的数据状态，这是HMR的关键特性）
通常使用webpack-dev-server
- 该工具包括自动监控代码编译，以及HMR。
webpack-dev-server将代码打包在内存中，所以修改代码时在项目下找不到动态生成的编译文件。
注意
依靠HMR的热更新机制，我们可以享受修改的文件被实时同步到浏览器的便利，但对于页面来说，这并不是全部。我们仍然需要在页面的js代码中做一些处理。
比如：我们在按钮上绑定了一个click事件的处理函数handleClick，我们修改了handleClick的代码，它被推送到浏览器中，但是页面并不会自动替换之前绑定的click事件，当我们点击按钮时，仍然得到旧的响应。
所以除了使用webpack-dev-server，我们需要在js代码中监听HMR 的 accept 方法，在此方法中更新类似的处理函数。
这也就是为什么在react项目中，我们需要使用react-hot-loader库，本质上是实现了HMR 的 accept 的处理。
参考文档
入门 Webpack，看这篇就够了
官方中文文档
Webpack Hot Module Replacement 的原理解析
关于我们
我们是一个高效、热情、有责任的技术团队，承接各种软件系统定制需求。
长期招聘远程开发者，如果您喜欢尝试新技术，有一点代码洁癖，能够使用文档进行高效的沟通，React/nodejs/ES6任意一种玩的飞起，那么，欢迎来撩~（想赚快钱的请绕道，谢谢）
简历请发送到：[email protected]
当然，也欢迎甲方爸爸把项目甩我们脸上。
深圳市浅海科技有限公司www.qianhaikeji.com.cn