- webpack有三个基础部分：
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
- 入口文件：
glob: node-glob学习. node的glob模块允许你使用 *等符号, 来写一个glob规则,像在shell里一样,获取匹配对应规则的文件.这个glob工具基于javascript.它使用了 minimatch 库来进行匹配.
const glob = require('glob');
glob.sync('./client/*').forEach(function (filepath) {
const dirName = path.basename(filepath);
entries[dirName] = [path.resolve(__dirname, '../', filepath)]; // 转换成绝对路径
});
// 同步获取文件
// 执行结果
./client/common --------------------filepath
common [ '/home/jr/fe/myProject/client/common' ] ------------dirname
./client/index --------------------filepath
index [ '/home/jr/fe/myProject/client/index' ] ------------dirname
__dirname: 总是返回被执行的 js 所在文件夹的绝对路径
__filename: 总是返回被执行的 js 的绝对路径
process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径
- output:
filename：每个文件的名称，默认值是 '[name].js'(模块名称)
chunkFilename:这个选项决定了按需加载的块文件的名称
path: 静态资源输出的路径
publicPath:加载外部资源的路径
- module: webpack的loarder相当于一个中间件 Webpack构建之法，Loader
preLoaders: preLoaders就是在调用loader之前需要调用的loader, 他不做任何代码的转换，只是进行检查。
devtool:其实就是选择一种调试代码的方式.
webpack devtool配置简单对比. 可以设断点调试，不显示列信息，生成相应的.Map文件，并在合并后的代码尾部加上注释//# sourceMappingURL=**.js.map ，可以看到模块代码并没有被eval()包裹，此种模式并没有将调试信息放入D打包后的代码中，保持了打包后代码的简洁性
query： preset 预设组件加载和使用。
plugins 插件加载和使用。
url-loader: url-loader?limit=1000&mimetype=xxx&name=xx
.demo { background-image: url('a.png'); }那么对应这样的 loader 配置就能把 a.png 抓出来, limit 限制文件小于1kb, mimetype指定文件类型
{ test: /jquery\.lazyload\.min\.js/, loader: 'imports?jQuery=jquery', },imports?jQuery=jquery，jquery.lazyload依赖于jQuery，用import引入jQuery
- vue:
- imageWebpackLoader:
- postcss:http://wiki.shanyishanmei.com/pages/viewpage.action?pageId=5453410
- plugins:
HotModuleReplacementPlugin:
ExtractTextPlugin: 将所有css打包成一个css文件
AssetsPlugin: 生成静态资源依赖文件
LiveReloadPlugin
- resolve:主要是用来配置解析模块路径和分析依赖
resolve.alias: 别名是 Webpack 的一个配置项，它的作用是把用户的一个请求重定向到另一个路径 。如果在alias中定义了值，然后在代码中require该值的时候，会重定向到alias指定的位置。
resolve.modulesDirectories: 是用来设置搜索的目录名的，默认值:["web_modules", "node_modules"]。如果把值设置成["mydir"]
, webpack会查询 “./mydir”, “../mydir”, “../../mydir”等。
- eslint: 在全局环境配置eslint入口
