美文网首页
Webpack 2.0 学习过程资料整理

Webpack 2.0 学习过程资料整理

作者: 流云012 | 来源:发表于2017-11-02 17:57 被阅读0次

Webpack学习过程及项目使用问题及资料整理 -- 2017.11.02

Webpack的简介及使用教程

Webpack核心概念:webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。

参考资料网址汇总

Webpack 打包参数汇总

  • --config webpack.config.js : 指定使用的配置文件
  • --progress: 打包进度
  • --display-modules: 打包的模块
  • --colors: 是否彩色显示,打包提示信息
  • --display-reasons: 打包原因
  • --watch: 自动监控文件变化
  • --hot: 开启模块热替换
  • --define: 定义任意的自由变量: --define process.env.NODE_ENV='development'
  • --debug : 把loader设置为 debug 模式
  • --profile: 捕获编译时每个步骤的时间信息,并且将这些信息包含在输出中
  • --bail: 一旦发生错误,立即终止
  • --cache: 开启缓存[watch 时会默认打开]

Webpack 配置及插件汇总

  • 核心插件
    • common-chunks-webpack-plugin
    • html-webpack-plugin
    • i18n-webpack-plugin
    • compression-webpack-plugin
    • extract-text-webpack-plugin
  • 推荐插件
    • CommonsChunkPlugin
    • webpack-bundle-analyzer(BundleAnalyzerPlugin)
    • optimize-css-assets-webpack-plugin(OptimizeCssAssetsPlugin)
  • 特殊插件

    • cross-env 使用cross-env解决跨平台设置NODE_ENV的设置问题
    
    
    • webpack-monitor 捕获构建生成的,生产环境中包体关键统计指标,提供了交互式地分析工具,来帮助开发者更好地审视包体的构成,以此来识别与选择可用的优化策略。

devtool 模块简介

webpack devtool里的7种SourceMap模式

devtool: "source-map", // or "inline-source-map"

entry 和 output 模块简介

  • 一个入口一个出口的情况
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};
编译后的文件为  bundle.js
  • 多个入口多个出口的情况(文件一一对应)
module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js'
  }
};
编译后的文件为  bundle1.js, bundle2.js

resolve 模块简介

module 模块简介

  • js或者jsx文件的处理
module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react',
      },
    ]
  }
  • css 文件的处理
module: {
    loaders:[
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    ]
 }
  • 图片的处理(jpg、png),小于8kb(limit可修改为其他)的,转为base64
module: {
    loaders:[
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
 }

plugins 插件模块简介

  • var webpack = require('webpack');
  • uglifyJsPlugin(webpack.optimize.UglifyJsPlugin)
// js压缩插件
new uglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  • DefinePlugin (webpack.DefinePlugin)
// 设置webpack默认的环境变量
new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
    })
    执行 env DEBUG=true, 修改参数的值
  • CommonsChunkPlugin (webpack.optimize.CommonsChunkPlugin)
// 提取公共部分插件(js,css)
new CommonsChunkPlugin('init.js')
// html 模板修改插件
new HtmlwebpackPlugin({
      title: '标题',
      template: 'index.html', // 源模板文件
      filename: 'index.html'   // 输出文件【注意:这里的根路径是module.exports.output.path】
    }),
  • HotModuleReplacementPlugin (webpack.HotModuleReplacementPlugin)
// 热更新插件
  new webpack.HotModuleReplacementPlugin(),
  • BundleAnalyzerPlugin (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
// 图形化打包结果显示
new BundleAnalyzerPlugin(), 
  • OpenBrowserPlugin (open-browser-webpack-plugin)
// 自动打开浏览器插件,端口号默认 8080
new OpenBrowserPlugin({
      url: 'http://localhost:8080'
    }),
  • BannerPlugin (webpack.BannerPlugin)
//这里是打包文件头部注释!
new webpack.BannerPlugin('这是一个注释头')
  • LoaderOptionsPlugin (webpack.LoaderOptionsPlugin)
// 去除调试代码,压缩代码
  • CopyWebpackPlugin(copy-webpack-plugin)
// 复制手动引入的资源文件到指定目录
new CopyWebpackPlugin([
        {
            from: config.srcPath + '/static',
            to: config.outputPath,
            ignore: ['.*']
        }
    ])

相关文章

  • Webpack 2.0 学习过程资料整理

    Webpack学习过程及项目使用问题及资料整理 -- 2017.11.02 Webpack的简介及使用教程 Web...

  • webpack+vue打包开发,生产环境

    参考资料webpack指南 最近在学习webpack的一些资料的整理,免得自己日后忘记,现在写一下开发的过程先。 ...

  • Webpack 学习资料整理

    本教程的目标 这是一本教你如何应用webpack到你的项目中的工具书。它包含了我们在Instagram中用到的绝大...

  • webpack学习资料整理

    前言 以下文章是我在近期工作实践中,对webpack的一个学习资料的整理。希望对阅读了此篇文章的小伙伴有所帮助。 ...

  • 2019-01-18

    4.28 Webpack使用 根据学习资料的webpack的时候,运行webpack失败,发现资料是3.xx版本,...

  • webpackV4 你需要知道的基础知识

    webpack相关概念: 总结webpack 运行过程如下: Webpack 运行机制中的运行机制: 资料: we...

  • webpack学习资料

    webpack 安装 npm install webpack -g 我们还可以直接安装到项目的依赖里,就是写入pa...

  • 各种学习资源

    这几天在整理自己的云盘资料时,发现有很多不错的内容,包括学习资料和学习视频,打算整理后分享给大家。在整理过程中,可...

  • vue-cli构建vue项目-前端完美开发环境搭建

    参考资料: Vue2.0 新手完全填坑攻略—从环境搭建到发布 vue-cli构建vue项目Webpack 入门...

  • 我和我的硕士论文战斗史

    论文的的完整过程,无非就是搜集资料,整理资料,开题答辩,搜集资料,整理资料,论证过程,论文送审,论文答辩。最核心的...

网友评论

      本文标题:Webpack 2.0 学习过程资料整理

      本文链接:https://www.haomeiwen.com/subject/sorapxtx.html