zoukankan      html  css  js  c++  java
  • webpack.config.js

    var webpack = require('webpack'); 
    module.exports = {
        //插件项
        plugins: [
            new webpack.optimize.CommonsChunkPlugin('common.js'),
            new webpack.optimize.UglifyJsPlugin(),
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.OccurrenceOrderPlugin()
        ], 
    
       //页面入口文件配置  
       entry: { index : './src/js/page/index.js' },
    
       //入口文件输出配置  
       output: { 
          path: 'dist/js/page', 
         filename: '[name].js' 
       },
       module: { 
    
       //加载器配置  
         loaders: [ 
            { test: /.css$/, loader: 'style-loader!css-loader' }, 
            { test: /.js$/, loader: 'jsx-loader?harmony',loader: 'babel-loader?presets[]=es2015&presets[]=react'}, 
            { test: /.scss$/, loader: 'style!css!sass?sourceMap'}, 
            { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'} 
         ] 
      }, 
    
      //其它解决方案配置  
      resolve: { 
         root: 'E:/github/flux-example/src', 
         //绝对路径 
         extensions: ['', '.js', '.json', '.scss'], 
         alias: { AppStore : 'js/stores/AppStores.js', 
                  ActionType : 'js/actions/ActionType.js', 
                  AppAction : 'js/actions/AppAction.js' 
                } 
       }
    }

    ⑴ plugins 是插件项,这里我们使用了一个 CommonsChunkPlugin 的插件,它用于提取多个入口文件的公共脚本部分,然后生成一个 common.js 来方便多页面之间进行复用。

    ⑵ entry 是页面入口文件配置,output 是对应输出项配置(即入口文件最终要生成什么名字的文件、存放到哪里),其语法大致为:

    {
        entry: {
            page1: "./page1",
            //支持数组形式,将加载数组中的所有模块,但以最后一个模块作为输出
            page2: ["./entry1", "./entry2"]
        },
        output: {
            path: "dist/js/page",
            filename: "[name].bundle.js"
        }
    }

    该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js,并存放到 ./dist/js/page 文件夹下。

    ⑶ module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理:

    module: {
            //加载器配置
            loaders: [
                //.css 文件使用 style-loader 和 css-loader 来处理
                { test: /.css$/, loader: 'style-loader!css-loader' },
                //.js 文件使用 jsx-loader 来编译处理
                { test: /.js$/, loader: 'jsx-loader?harmony' },
                //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
                { test: /.scss$/, loader: 'style!css!sass?sourceMap'},
                //图片文件使用 url-loader 来处理,小于8kb的直接转为base64
                { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
            ]
        }

    如上,"-loader"其实是可以省略不写的,多个loader之间用“!”连接起来。

    注意所有的加载器都需要通过 npm 来加载,并建议查阅它们对应的 readme 来看看如何使用。

    拿最后一个 url-loader 来说,它会将样式中引用到的图片转为模块来处理,使用该加载器需要先进行安装:

    npm install url-loader -save-dev

    配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式(其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)

    ⑷ 最后是 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'
            }
        }

    运行webpack:

    webpack 的执行也很简单,直接执行

    $ webpack --display-error-details

    即可,后面的参数“--display-error-details”是推荐加上的,方便出错时能查阅更详尽的信息(比如 webpack 寻找模块的过程),从而更好定位到问题。

    其他主要的参数有:

    $ webpack --config XXX.js   //使用另一份配置文件(比如webpack.config2.js)来打包
     
    $ webpack --watch   //监听变动并自动打包
     
    $ webpack -p    //压缩混淆脚本,这个非常非常重要!
     
    $ webpack -d    //生成map映射文件,告知哪些模块被最终打包到哪里了

    其中的 -p 是很重要的参数,曾经一个未压缩的 700kb 的文件,压缩后直接降到 180kb(主要是样式这块一句就独占一行脚本,导致未压缩脚本变得很大)

    在 AMD/CMD 中,我们需要对不符合规范的模块(比如一些直接返回全局变量的插件)进行 shim 处理,这时候我们需要使用 exports-loader 来帮忙:

    { test: require.resolve("./src/js/tool/swipe.js"),  loader: "exports?swipe"}

     独立打包样式文件

    有时候可能希望项目的样式能不要被打包到脚本中,而是独立出来作为.css,然后在页面中以<link>标签引入。这时候我们需要 extract-text-webpack-plugin 来帮忙:

    var webpack = require('webpack');
        var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
        var ExtractTextPlugin = require("extract-text-webpack-plugin");
     
        module.exports = {
            plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")],
            entry: {
            //...省略其它配置

    webpack打包参数:

    webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch --progress --dislay-modules --display-reason

    webpack --config webpack.dev.config.js --progress --display-modules --colors --display-reasons

  • 相关阅读:
    HDU 1114 Piggy-Bank
    HDU 2955 Robberies
    NTOJ 290 动物统计(加强版)
    POJ 3624 Charm Bracelet
    HDU 2602 Bone Collector
    POJ 1523 SPF(无向图割顶)
    HDU 5311 Hidden String
    HDU 1421 搬寝室
    HDU 1058 Humble Numbers
    POJ 3259 Wormholes(spfa判负环)
  • 原文地址:https://www.cnblogs.com/xiaotaiyang/p/5591195.html
Copyright © 2011-2022 走看看