/webpack

Primary LanguageJavaScript

Webpack

资料

Babel

  1. 阮一峰 Babel 入门教程
  2. 有关babel插件的解释

webpack

  1. 官方教程
  2. 阮一峰demo
  3. webpack 资源合集
  4. webpack中文文档
  5. webpack+express 全栈刷新

ES6

  1. 阮一峰教程

webpack plugins

  1. CommonChunksLoader --- 用来提取公共模块的

用法：在plugins 里面加入：

new  webpack.optimize.CommonsChunkPlugin('common.js', ['main1', 'main2'])文件

其中 common.js 是抽取出来的公共的部分， main1 main2 是多入口文件的文件名

  1. open-browser-webpack-plugin 插件

这个插件可以在webpack 打包完毕后自动打开浏览器而不需要自己输入localhost:xxxx 等等，

配置情况是 下载该插件 然后在weboack.config.js 中引入该插件

var openBrowserWebpackPlugin = require('open-browser-webpack-plugin');

.....

plugins:[
		new openBrowserWebpackPlugin({ url: 'http://localhost:8080' })
	],

这样配置即可

Issue

  1. Unknown option: …/.babelrc.presets

  2. 上面的babel学习的资料也提到，.babelrc 文件必须放到根目录的下面，presets里面有什么，就要注意将该文件架子啊进来

  3. import 和 require

    1. 都是加载文件的，但是方式不同,引入一个 css 文件的话：这两者的方式分别是：
      • import: import ./style.css
      • require: require("./style.css")
    2. 当然加载其他的文件也是一样 3. import 是es6的语法需要babel支持

  4. 无法识别react 的语法

  5. 在 package.json 的"script"里面加入"dev": "./node_modules/.bin/webpack-dev-server --progress --colors --content-base build" 同时在webpack.config.js里面配置好devServer。便可以直接使用 npm run dev 来运行代码了

  6. 有关publicPath 的问题：

    • publicPath 是当浏览器引用时会制定输出文件的公共url地址，对于嵌入的script和link标签，如果path 和publicPath 不同的时候，publicPath 被作为文件的href或者url 当你想在不同域上处处文件或者在CDN上publicPath很有用，所以如果都不具备这些条件的话，可以直接一个path就够了 不写publicPath了。后面的遇到这个问题再继续搞吧~
    • 小伙伴给我找的两篇文章:
      1. webpack配置解释
      2. webpack配置解释

  7. 又出现一个问题：当我使用npm run dev 运行example-12的例子的时候显示的是content is served from /xxx/xxx/Desktop/webpack/webpack-example 然后显示的就是根目录 如下图所示：contentBase 如果我想进入example-12 的话还得点进去 然后才可以看到结果~

    • 问题： “ContentBase” 的设置问题
    • 解决方案：默认查找的是index.html 所以如果index.html在运行的文件夹下面的话那么就不用写contentBase如果是在里面的文件夹下面则：contentBase: "build"这种形式 PS: build 只是个例子。

  8. 有关自动刷新的问题，webpack-dev-server 有两种模式支持自动刷新：

    • 贴链接就OK了。自动刷新模式
    • PS: 模块的热替换和组件级热更新都是上面链接中提到的。
    • 一般上述条件做的话就是只刷新html 文件，但是在我们开发中需要刷新的一般不是index.html 也许是css 也许是jsx，所以要实现实时刷新的效果一般的方法是在React/下面的refresh-real-time文件下面写的哪两种方法。