简介
为黄梅等地区用户提供了全套网页设计制作服务,及黄梅网站建设行业解决方案。主营业务为做网站、成都网站设计、黄梅网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!看《深入浅出webpack》总结一下常用的webpack的属性的含义并加了一些自己的链接,写在一个文件下更能有全局感受,更能理解各个属性中间的关系,重点要关注entry
,output
,resolve
,module
, plugins
几部分
配置示例
这并不是一个拿来可用的配置,主要是为了更好理解常用的一些webpack属性的作用,所以每一行都有注释,放到一起,更能看到每一个属性在其中的作用
module.exports = { // __dirname值为所在文件的目录,context默认为执行webpack命令所在的目录 context: path.resolve(__dirname, 'app'), // 必填项,编译入口,webpack启动会从配置文件开始解析,如下三种(还有一种动态加载entry的方式就是给entry传入一个函数,这个在项目比较大,页面很多的情况下可以优化编译时间) entry: './app/entry', // 只有一个入口,入口只有一个文件 entry: ['./app/entry1', './app/entry2'], // 只有一个入口,入口有两个文件 // 两个入口 entry: { entry1: './app/entry1', entry2: './app/entry2' }, // 输出文件配置 output: { // 输出文件存放的目录,必须是string类型的绝对路径 path: path.resolve(__dirname, 'dist'), // 输出文件的名称 filename: 'bundle.js', filename: '[name].js', // 配置了多个入口entry是[name]的值会被入口的key值替换,此处输出文件会输出的文件名为entry1.js和entry2.js filename: [chunkhash].js, // 根据chunk的内容的Hash值生成文件的名称,其他只还有id,hash,hash和chunkhash后面可以使用:number来取值,默认为20位,比如[name]@[chunkhash:12].js, // 文件发布到线上的资源的URL前缀,一般用于描述js和css位置,举个例子,打包项目时会导出一些html,那么html里边注入的script和link的地址就是通过这里配置的 publicPath: "https://cdn.example.com/assets/", // CDN(总是 HTTPS 协议) publicPath: "//cdn.example.com/assets/", // CDN (协议相同) publicPath: "/assets/", // 相对于服务(server-relative) publicPath: "assets/", // 相对于 HTML 页面 publicPath: "../assets/", // 相对于 HTML 页面 publicPath: "", // 相对于 HTML 页面(目录相同) // 当需要构建的项目可以被其他模块导入使用,会用到libraryTarget和library library: 'xxx', // 配置导出库的名称,但是和libraryTarget有关,如果是commonjs2默认导出这个名字就没啥用 // 从webpack3.1.0开始,可以为每个target起不同的名称 library: { root: "MyLibrary", amd: "my-library", commonjs: "my-common-library" }, libraryTarget: 'umd', // 导出库的类型,枚举值: umd、commonjs2、commonjs,amd、this、var(默认)、assign、window、global、jsonp(区别查看补充2) // 需要单独导出的子模块,这样可以直接在引用的时候使用子模块,默认的时候是_entry_return_ libraryExport: 'default', // __entry_return_.default libraryExport: 'MyModule', // __entry_return_.MyModule libraryExport: ['MyModule', 'MySubModule '], // 使用数组代表到指定模块的取值路径 __entry_return_.MyModule.MySubModule // 配置无入口的chunk在输出时的文件名称,但仅用于在运行过程中生成的Chunk在输出时的文件名称,这个应该一般和插件的导出有关,支持和filename一样的内置变量 chunkFilename: '[id].js', // 是否包含文件依赖相关的注释信息,不懂?请看补充3,在mode为development的是默认为true pathinfo: true, // JSONP异步加载chunk,或者拼接多个初始chunk(CommonsChunkPlugin,AggressiveSplittingPlugin) jsonpFunction: 'myWebpackJsonp', // 此选项会向应盘写入一个输出文件,只在devtool启动了sourceMap选项时采用,默认为`[file].map`,除了和filename一样外还可以使用[file] sourceMapFilename: '[file].map', // 浏览器开发者工具里显示的源码模块名称,此选项仅在 「devtool 使用了需要模块名称的选项」时使用,使用source-map调试,关联模块鼠标移动到上面的时候显示的地址(截不到图啊,醉了),默认这个值是有的,一般不需要关心 devtoolModuleFilenameTemplate: 'testtest://[resource-path]' }, // 配置模块相关 module: { rules: [ // 配置loaders { test: /\.jsx?$/, // 匹配规则,匹配文件使用,一般使用正则表达值 include: [path.resolve(__dirname, 'app')], // 只会命中这个目录文件 exclude: [path.resolve(__diranme, 'app/demo-files')], // 命中的时候排除的目录 use: [ // 使用的loader,每一项为一个loader,从该数组的最后一个往前执行 'style-loader', // loader的名称,这样则是使用默认配置,可以在后面加!配置属性,也可以用下面方式 { loader: 'css-loader', // loader的名称 options: {} // loader接受的参数 } ], noParse: [ // 不用解析和处理的模块 RegExp | [RegExp] | function(从 webpack 3.0.0 开始) /jquery|lodash/ ] } ] }, // 配置插件,关于和loader区别见补充4 plugins: [ // 压缩js的plugin new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: false, } }), ], // 解析文件引用的模块的配置 resolve: { // 模块的根目录,默认从node_modules开始找 modules: [ 'node_modules', 'browser_modules' ], // 模块的后缀名,我们引入模块有时候不写扩展名,自动补充扩展名的顺序如下 extensions: ['.js', '.json', '.jsx', '.css'], // 模块解析时候的别名 alias: { // 那么导入模块时则可以写import myComponent from '$component/myComponent'; $component: './src/component', // 末尾加$精确匹配 xyz$: path.resolve(__dirname, 'path/to/file.js') }, // 此选项决定优先使用package.json配置哪份导出文件,详见补充5 mainFields: ['jsnext:main', 'browser', 'main'], // 是否强制导入语句写明后缀 enforceExtension: false, // 是否将符号链接(symlink)解析到它们的符号链接位置(symlink location) symlinks: true, }, // 选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。 devtool: 'source-map', // 配置输出代码的运行环境,可以为async-node,electron-main,electron-renderer,node,node-webkit,web(默认),webworker target: 'web', externals: { // 使用来自于js运行环境提供的全局变量 jquery: 'jQuery' }, // 控制台输出日志控制 stats: { assets: true, // 添加资源信息 colors: true, // 控制台日志信息是否有颜色 errors: true, // 添加错误信息 errorDetails: true, // 添加错误的详细信息(就像解析日志一样) hash: true, // 添加 compilation 的哈希值 }, devServer: { // 本地开发服务相关配置 proxy: { // 代理到后端服务接口 '/api': 'http://localhost:3000' }, contentBase: path.join(__dirname, 'public'), // 配置devserver http服务器文件的根目录 compress: true, // 是否开启gzip压缩 hot: true, // 是否开启模块热交换功能 https: false, // 是否开启https模式 historyApiFallback: true, // 是否开发HTML5 History API网页,不太理解TODO }, profile: true, // 是否捕捉webpack构建的性能信息,用于分析是什么原因导致的构建性能不佳 cache: false, // 缓存生成的 webpack 模块和 chunk,来改善构建速度。缓存默认在观察模式(watch mode)启用。 cache: { // 如果传递一个对象,webpack 将使用这个对象进行缓存。保持对此对象的引用,将可以在 compiler 调用之间共享同一缓存: cache: SharedCache // let SharedCache = {} }, watch: true, // 是否启用监听模式 watchOptions: { // 监听模式选项 ignored: /node_modules/, // 不监听的文件或文件夹,支持正则匹配,默认为空 aggregateTimeout: 300, 监听到变化后,300ms再执行动作,节流,防止文件更新频率太快导致重新编译频率太快 poll: 1000 // 检测文件是否变化,间隔时间 }, // 输出文件的性能检查配置 perfomance: { hints: 'warning', // 有性能问题时输出警告 hints: 'error', // 有性能问题时输出错误 hints: false, // 关闭性能检查 maxAssetSize: 200000, // 大文件大小,单位bytes maxEntrypointSize: 400000, // 大入口文件的大小,单位bytes // 此属性允许 webpack 控制用于计算性能提示的文件。 assetFilter: function(assetFilename) { return assetFilename.endsWith('.css') || assetFilename.endsWith('.js'); } } }
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。