回复:webpack学习
2017-06-21 17:44:27
webpack.config.js配置详解 ：
var webpack = require("webpack");
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");
module.exports = {
noParse:[/jquery/]，//表示跳过jquery,不对其进行编译,这样可以提高打包的速度
plugins:[
commonsPlugin，
//配置了NoErrorsPlugin插件，用来跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误
new webpack.NoErrorsPlugin()
],
entry: {
index:"./src/js/startup.js"
},
//入口文件输出配置
output:{
//path: 打包好的资源存放的位置
path:"./js",
//filename: 打包后的文件名
filename: "[name].bundle.js"
},
// externals: { //排除构建文件外
// "react": "React"
// },
module: {
//加载器配置
//module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理
loaders:[
{
//用于匹配加载器支持的文件格式的正则表达式
test: /.css$/,
//多个加载器通过"!"连接,加载器是从右向左开始使用的
//loader指定了要使用的加载器类型
loader: "style-loader!css-loader"
},
{
//配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式 （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
test: /.(png|jpg)$/,
//加载器支持通过查询字符串的方式接收参数
loader: "url-loader?limit=8192"
},
{
//presets:指定哪些代码转换器将启用babel
test: /.js$/,
loader: "babel-loader",
//exclude:/node_modules/,排除node_modules这个文件夹中的代码
//include:/(admin|consumer)//表示只针对这两个文件夹中的代码进行打包
//include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）
exclude:/node_modules/,
query:{
presets:["es2015","react"]
}
},
{
test: /.jsx$/,
//?表示加载器支持通过查询字符串的方式接收参数
//!表示多个加载器之间通过"!"连接
loader: "babel-loader!jsx-loader?harmony"
}
]
},
//文件解析配置
//会依次寻找不带后缀的文件，.js后缀文件以及.jsx后缀文件。先找到哪个是哪个
resolve: {
extensions: ["", ".js", ".jsx"],//当requrie的模块找不到时，添加这些后缀
root:"E:/myev/src",//绝对路径
alias: {//别名配置
}
}
}
}
这里对Webpack的打包行为做了配置，主要分为几个部分：
plugins 是插件项(是一个数组)：这里我们使用了一个 CommonsChunkPlugin 的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。对于用到的插件，只需要将插件new出来放到数组中即可。
entry：指定打包的入口文件，每有一个键值对，就是一个入口文件
output：配置打包结果，path定义了输出的文件夹(即打包好的文件要放到哪里)，filename则定义了打包结果文件的名称，filename里面的[name]会由entry中的键（这里是index）替换。publicPath:如果要使用webpack-dev-server(webpack配置服务器，端口号是8080)就需要配置(标明我们要从哪个地方获取打包好的文件)
externals：当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题。
resolve：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全。比如 Hello.jsx 这样的文件就可以直接用 require(./Hello) 引用。 resolve 配置，配置查找模块的路径和扩展名和别名（方便书写）。可以用 alias 指定从非npm引入的库，如
jQuery:path.resolve(__dirname,"./bower_components/jquery/dist/jquery.js") ，
这样在 import 时可以替换引用路径。
- module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过babel-loader处理，然后经过jsx-loader处理。当然这些loader也需要通过npm install安装，“-loader”其实是可以省略不写的，多个loader之间用“!”连接起来。
