<div>
<p></p>
<div style="text-align:center;">
<img alt="b8f0b2be3fb41a42c39c8bf9d4efda0e.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-c88845be7a3a34c9f53466f5e2fde5dd.png">
</div>
<p>内容提纲：</p>
<ul><li>electron-vue项目中的webpack工程实例</li><li>思考</li><li>webpack与gulp/grunt</li><li>HMR</li></ul>
<h2><b>electron-vue项目中的webpack工程实例</b></h2>
<p>从electron-vue项目中的实际使用例子来入手</p>
<p>如下是 <code>webpack.renderer.config.js</code> 文件</p>
<div class="blockcode">
<pre class="blockcode"><code>'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 的作用是使用 <style></style> 标签将样式添加到页面 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: {<!-- -->
|
|
转播
