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插件extract-text-webpack-plugin抽取css后，图片路径出现问题
  修改rules加载器中的publicPath路径，

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