webpack总体配置结构

摘自《深刻浅出webpack》2.8 const path = require('path'); module.exports = { // entry 表示入口，webpack执行的第一步将从entry开始，可抽象成输入 // 类型能够是String，object，array entry: './app/entry', // 只有一个入口，入口只有一个文件 entry: ['./app/entry1','./app/entry1'], // 只有一个入口，入口有两个文件 entry: {// 有两个入口 a: './app/entry-a', b: ['./app/entry-b1','./app/entry-b2'], }, // 如何输出结果：在webpack通过一系列处理后，如何输出最终想要的代码 output: { // 输出文件存放的目录，必须是string类型的绝对路径 path: path.resolve(__dirname, 'dist'), // 输出文件的名称 filename: 'bundle.js',// 完整的名称 filename: '[name].js',// 在配置多个entry时，经过名称模板为不一样的entry生成不一样的文件名称 filename: '[chunkhash].js', // 根据文件内容的hash值生成文件的名称，用于浏览器长时间缓存文件 // 发布到线上的全部资源的URL前缀，为string类型 publicPath: '/assets/', // 放到指定目录下 publicPath: '', //放到跟目录下 publicPath: 'http://cdn.example.com/', // 放倒CDN上 // 导出库的名称，为string类型 // 不填它时，默认的输出格式是匿名的当即执行函数 library: 'MyLibrary', // 导出库的类型，为枚举类型，默认是var // 能够是umd、umd二、commonjs二、commonjs、amd、this、var、assign、window、global、jsonp libraryTarget: 'umd', // 是否包含有用的文件路径信息到生成的代码里，为boolean类型 pathinfo: true, // 附加chunk的文件名称 chunkFilename: '[id].js', chunkFilename: '[chunkhash].js', // jsonp异步加载资源时的毁掉函数名称，须要和服务器搭配使用 jsonpFunction: 'myWebpackJsonp', // 生成的Source Map文件的名称 sourceMapFilename: '[file].map', // 浏览器开发者工具里显示的源码模块名称 devtoolModuleFilenameTemplate: 'webpack:///[resource-path]', // 异步加载跨域的资源时使用的方式 crossOriginLoading: 'use-credentials', crossOriginLoading: 'anonymous', crossOriginLoading: false, }, // 配置模块相关 module: { rules: [//配置Loader { test: /.jsx?$/, // 正则匹配命重要使用Loader的文件 include: [// 只会命中这里面的文件 path.resolve(__dirname, 'app') ], exclude: [// 忽略这里面的文件 path.resolve(__dirname, 'app/demo-files') ], use: [// 使用哪些Loader，有前后次序，从后向前执行 'style-loader', // 直接使用loader的名称 { loader: 'css-loader', options: {// 向html-loader传一些参数 } } ] } ], noParse: [// 不用解析和处理的模块 /special-library.js$/ //用正则匹配 ], }, // 配置插件 plugins: [ ], //配置寻找模块的规则 resolve: { modules: [// 寻找模块的根目录，为array类型，默认以node_modules 为根目录 'node_modules', path.resolve(__dirname, 'app') ], extensions: ['.js', '.json', '.jsx', '.css'], // 模块的后缀名 alias: {// 模块别名设置，用于映射模块 // 将'module'映射成'new-module',一样，'module/path/file'也会被映射成 'new-module/path/file' 'module': 'new-module', // 使用结尾符$后，将'only——module' 映射成 'new-module'， // 可是不像上面的， 'module/path/file' 不会被映射成'new-module/path/file' 'only-module': 'new-module' }, alias: [// alias还支持使用数组来更详细的进行配置 { name: 'module',// 老模块 alias: 'new-module', // 新模块 // 是否只映射模块，若是是true，则只有'module'会被映射；若是是false，则'module/inner/path'也会被映射 onlyModule: true, } ], symlinks: true, // 是否跟随文件的软链接去搜寻模块的路径 descriptionFiles: ['package.json'], // 模块的描述文件 mainFields: ['main'], // 模块的描述文件里描述入口的文件的字段名 enforceExtension: false, // 是否强制导入语句写明文件后缀 }, performance: { hints: 'warning', // 有性能问题时输出警告 hints: 'error', // 有性能问题时输出错误 hints: false, // 关闭性能检查 maxAssetSize: 200000, // 最大文件的大小（单位为bytes） maxEntrypointSize: 400000, // 最大入口文件的大小(单位为bytes) assetFilter: function (assetFilename) {// 过滤要检查的文件 return assetFilename.endsWith('.css') || assetFilename.endsWith('.js') } }, devtool: 'source-map', // 配置source-map类型 context: __dirname, // webpack使用的根目录，string类型必须是绝对路径 // 配置输出代码的运行环境 target: 'web', // 浏览器，默认 target: 'webworker', // webworker target: 'node', // Node.js ,使用require语句加载chunk代码 target: 'async-node', // Node.js ，异步加载chunk代码 target: 'node-webkit', // nw.js target: 'electron-main', // electron, 主线程 target: 'electron-renderer', // electron,渲染线程 externals: { // 使用来自JasvaScript运行环境提供的全局变量 jquery: 'jQuery', // }, stats: {// 控制台输出日志控制 assets: true, colors: true, errors: true, errorDetails: true, hash: true, }, devServer: {// DevServer相关的配置 proxy:{// 代理到后端服务接口 '/api': 'http://localhost:3000', }, contentBase: path.join(__dirname, 'public'),// 配置DevServer HTTP服务器的文件根目录 compress: true,// 是否开启Gzip压缩 historyApiFallback: true,// 是否开发html5 history api网页 hot: true, // 是否开启模块热替换 https: false, // 是否开启https模式 }, profile: true,// 是否捕捉webpack构建的性能信息，用于分析是什么缘由致使构建性能不佳 cache: false,// 是否启用缓存来提高构建速度 watch: true,// 是否开始 watchOptions: {// 监听模式选项 // 不监听的文件或文件夹，支持正则匹配，默认为空 ignored: /node_modules/, //监听到变化发生后，等300ms再执行动做，截流，防止文件更新太快致使从新编译频率太快，默认为300ms， aggregateTimeout: 300, // 不停地询问系统指定的文件有没有发生变化，默认每秒询问1000次 poll: 1000 }, }