f.js详解
f.js详解
//引⼊当前⽬录下的utils.js⽂件模块
var utils = require('./utils')
//node的path模块
var path = require('path')
//内置模块
var webpack = require('webpack')
//引⼊config⽬录下的index.js⽂件
var config = require('../config')
//进⾏合并对象，相同项⽬会进⾏覆盖
var merge = require('webpack-merge')
var baseWebpackConfig = require('./f')
// 下⾯是⼀个⾃动⽣成html的插件，能够把资源⾃动加载到html⽂件中
// 详情请看 (1）
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 下⾯这个插件是⽤来把webpack的错误和⽇志收集起来，漂亮的展⽰给⽤户
// 详情请看 (2)
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
//=======================静态编译ssi资源==================================
var SSICompileWebpackPlugin = require('ssi-webpack-plugin')
// add hot-reload related code to entry chunks
/
/ Object.keys(obj) Object.keys() ⽅法会返回⼀个由⼀个给定对象的⾃⾝可枚举属性组成的数组，
//数组中属性名的排列顺序和使⽤循环遍历该对象时返回的顺序⼀致（两者的主要区别是⼀个 for-in 循环还会枚举其原型链上的属性）。Object.).forEach(function (name) {
// 下⾯这个结果就是把f.js中的⼊⼝entry改成如下配置
// app: ['./build/dev-client','./src/main.js']    //即数组多加了⼀个元素
<[name] = ['./build/dev-client'].[name])
})
// 下⾯是合并配置对象，将这个配置⽂件特有的配置添加替换到base配置⽂件中
module: {
  // 下⾯是把utils配置中的处理css类似⽂件的处理⽅法拿过来，并且不⽣成cssMap⽂件
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
// devtool是开发⼯具选项，⽤来指定如何⽣成sourcemap⽂件，cheap-module-eval-source-map此款soucemap⽂件性价⽐最⾼
devtool: '#source-map',
plugins: [
// DefinePlugin内置webpack插件，专门⽤来定义全局变量的，下⾯定义⼀个全局变量 v 并且值是如下
/* 'v': { NODE_ENV: '"development"' }
这样的形式会被⾃动转为 'v': '"development"'
各位骚年看好了，development如果不加双引号就当做变量处理，程序会报错 */
new webpack.DefinePlugin({
'v': v
}),
//提取公共代码块 babel-polyfill只能有⼀个实例
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: ['index', 'admin'],
minChunks: function (module, count) {
return (
/\.js$/.source) &&
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// github/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
// 下⾯这个插件⽐较简单，就是当webpack编译错误的时候，来中端打包进程，防⽌错误代码打包到⽂件中，你还不知道
new webpack.NoEmitOnErrorsPlugin(),
// github/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: './src/assets/images/favicon.ico',
excludeChunks: ['admin'],
inject: true
}),
new HtmlWebpackPlugin({
filename: 'admin.html',
template: 'admin.html',
favicon: './src/assets/images/favicon.ico',
excludeChunks: ['index'],
inject: true
}),
new SSICompileWebpackPlugin({
publicPath:'',
localBaseDir:'C:/Developer/newWorkspace',
minify:false
}),
new FriendlyErrorsPlugin()
]
})
注释
(1)html-webpack-plugin插件是⽤来⽣成html⽂件的，有很灵活的配置项，下⾯是基本的⼀些⽤法
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({  // Also generate a test.html
filename: 'test.html', // ⽣成的⽂件的名称
title: 'Custom template', // ⽂件的标题
template: 'my-index.ejs' //可以指定模块html⽂件
})
]
下⾯是模板⽂件my-index.ejs的内容
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title> //这⾥使⽤特殊的表⽰插⼊配置项的title
</head>
<body>
</body>
</html>
(2)friendly-errors-webpack-plugin插件，把webpack编译出来的错误展⽰给我们，⽅便调试
js合并两个数组
安装 npm install friendly-errors-webpack-plugin --save-dev
基本使⽤
plugins: [
new FriendlyErrorsWebpackPlugin(),
]
注意点，使⽤这个插件要遵守下点
您需要关闭所有的错误⽇志记录，将webpack配置静默选项设置为true
也就是遵循以下三点即可
在使⽤webpack-dev-middleware插件，关于这个插件的解释在我的dev-sever-js配置⽂件中有解释，设置以下内容        app.use(require('webpack-dev-middleware')(compiler, {
quiet: true, // 必须设置
publicPath: config.output.publicPath,
}));
使⽤webpack-dev-server时设置如下
{
devServer: {
quiet: true
}
}
使⽤webpack-hot-middleware中间件，关于这个插件的解释也在我的dev-server-js⽂章中
app.use(require('webpack-hot-middleware')(compiler, {
log: () => {}
}));
做到以上⼏点，就可以正常使⽤这个插件了，这个插件还有⼀些配置项，感兴趣⾃⾏了解
(3) HotModuleReplacementPlugin解释如下
⽼哥们知道什么是webpack模块不
webpack⽀持如下模块
CoffeeScript
TypeScript
ESNext (Babel)
Sass
Less
Stylus
这些模块⽀持如下导⼊的⽅式
ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less ⽂件中的 @import 语句。
样式(url(...))或 HTML ⽂件(<img src=...>)中的图⽚链接(image url)
看到了把，webpack就是这么强⼤，⼏乎囊括了前端所有的东西
这个插件的作⽤就是当你的程序在运⾏时，⽽你现在要替换、添加或删除某个模块，⼜不想重新加载页⾯，这个插件帮助你实现⽆刷新加载，关于内部实现原理，其实有点意思，各位请⾃⾏查看

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。