webpack一些其他配置

context

基本目录，一个绝对路径，用于从配置中解析入口点和加载器。

默认情况下，使用当前目录，但是建议在配置中传递一个值。这使您的配置独立于CWD（当前工作目录）。

context : path.resolve(__dirname,"src")
1

output

output : {
		library : "aaa",
		libraryTarget : "this"
	},
1
2
3
4

library :打包的结果，会将立即执行函数的执行结果赋值给aaa

libraryTarget :配合library更加精细的赋值给那个对象

取值:
var
window
this
global
commonjs

效果图如下：

target

target ：打包以后代码运行的环境

target : "node"
1

web：打包好的代码运行在web环境

node：打包好的代码运行在node环境

module

module : {
		rules : [],
		noParse : /a\.js$/    //不去对a模块做任何解析，直接将a的源代码放到模块中
	}
1
2
3
4

rules ：规则，里面每一个对象都是对应的规则

noParse：表示不需要解析的模块 大型的模块不需要再打包了 比方说jquery 提高性能

resolve.modules

告诉 webpack 解析模块时应该搜索的目录。

绝对路径和相对路径都能使用，但是要知道它们之间有一点差异。

modules : ["node_modules"]   //默认值
require("abc")  //webpack会找当前目录的node_modules文件夹，没有再找上级的node_modules文件夹
1
2

resolve.extensions

extensions: [".js", ".json"]   //默认值
require("./abc")  会依次进行查找   abc.js  如果没有找abc.json 
1
2

自动解析确定的扩展。

能够使用户在引入模块时不带扩展

resolve.alias

alias: {
  	@ : path.resolve(__dirname, 'src'),
  	_ : __dirname
}
1
2
3
4

创建 import 或 require 的别名，来确保模块引入变得更简单。

详细情况请参考这里

externals

externals : {
		jquery : $
	}
1
2
3

不需要打包，但是可以直接使用，提升性能

stats

默认情况下是verbose，也就是全部输出，此刻我们将他改为“errors-only”方式，只需要在开发环境和生产环境的webpack.dev.js和webpack.prod.js中添加stats配置即可

stats: 'errors-only'