webpack|webpack 相关 webpack相关

webpack.config.js 相关

entry:入口文件，也就是 src/js/app里面的index.js,其中__dirname是获得当前文件所在目录的完整目录名
output:输出编译后的文件 index.js，输出到 public/js 里面
module：配置Loaders，通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件
resolve.alias：设置模块别名，便于我们更方便引用，比如说我在 js里面的文件需要 jquery，在里面的文件直接写 require("jquery") 就行了
如果所有文件都需要 jquery,那么直接在 plugins （插件）里面写如下代码，就不需要在每个模块引入 jQuery ：

plugins: [ new webpack.ProvidePlugin({ $: "jquery" }) ]

____________________________________________

webpack resolve用处：

resolve: { //查找module的话从这里开始查找 root: 'E:/github/flux-example/src', //绝对路径//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名 extensions: ['', '.js', '.json', '.scss'],//模块别名定义，方便后续直接引用别名，无须多写长长的地址 alias: { AppStore : 'js/stores/AppStores.js', //后续直接 require('AppStore') 即可 ActionType : 'js/actions/ActionType.js', AppAction : 'js/actions/AppAction.js' } }

package.json 相关

在该文件的脚本中添加下方代码，实现webpack工具的简易用法：

"scripts": { "webpack": "webpack --config ./src/webpack.config.js --mode=production", "watch": "onchange 'src/**/*.js' 'src/**/*.less' -- npm run webpack" }

使用 npm run webpack 来打包文件，并且使用 npm run watch 实现监听编写文件，实现自动化打包，提高效率。
插件篇（webpack.config.js中）插件篇

autoprefixer ：自动补全css3前缀，自动检测兼容性给各个浏览器加个内核前缀的插件
html-webpack-plugin：它会在dist目录下自动生成一个index.html
extract-text-webpack-plugin：把额外的数据加到编译好的文件中
copy-webpack-plugin：在webpack中拷贝文件和文件夹
webpack.ProvidePlugin：全局挂载插件

问题汇总：

当使用webpack打包时，会出现黄色的警告。

文章图片

mode是webpack中独有的，有两种打包环境，一个是开发环境：development另外一个是生产环境：production
打包的时候输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了

文章图片

可以在webpack.json文件中添加脚本，如上图。使用的便是生产模式下的打包，是压缩过的代码。
【webpack|webpack 相关】webpack插件extract-text-webpack-plugin抽取css后，图片路径出现问题
修改rules加载器中的publicPath路径，

ExtractTextPlugin.extract({ fallback: "style-loader", use: [{ loader: 'css-loader', options: { minimize: true //css压缩 } }, 'postcss-loader'], publicPath: '../' })