你的位置:首页 > Java教程

[Java教程]webpack配置


var webpack = require("webpack");// 如果要单独写一个css文件的话 安装这个插件,并且引进var ExtractTextPlugins = require('extract-text-webpack-plugin');// 根据上面的var extractCSS = new ExtractTextPlugins('css/index.css');var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    // 单入口  // entry:__dirname + '/src/js/index.js',  // 增加入口  entry:{    // 输出 app.js __dirname 表示完整路径    app:__dirname + '/src/js/index.js',    // 其他入口    more:[__dirname+ '/src/js/a.js',__dirname + '/src/js/b.js'],    // 引入包 如果加入其它的就在数组中写出来比如['jquery','react']    // 输出v.js    v:['jquery']  },  // 输出  output:{    path:__dirname + '/assets/',    // 一个出口    // filename:"js/index.js",    // 多个出口 [name]    filename:"js/[name].js",    // 配置的时候,这个可以省略    // publicPath:"/assets/"  },  // 配置本地服务  devServer:{    contentBase:"./",    host:'192.168.0.100',    port:'8080',    color:true  },  module:{    // 可以在npmjs中搜索自己所要的包    // 比如我现在需要编译sass 那我就可以输入sass-loader 右侧提示如何安装包npm install sass-loader    // 复制loaders    // {     //  test: /\.scss$/,     //  loaders: ["style", "css", "sass"]     // }    loaders:[    // 引进了ExtractTextPlugins换一种写法      // {      //   test:/\.css$/,      //   loader:'style-loader!css-loader'      // },      {        test:/\.css$/,        loader:extractCSS.extract('style-loader',"css-loader")      },      // less自动转移      {        test: /\.less$/,        loader: "style!css!less"      },      // {      //   test:/\./,      //   loader:      //   include/exclude      //   query为loader提供额外的配置      // }      {        test:/\.json$/,        loader:"json"      },      {        test:/\.js$/,        // 表示不包括这个文件夹        exclude:/node_modules/,        loader:'babel',        //         query:{          //           presets:['es2015','react']        }      },      /* {        test: /\.js$/,        exclude: /(node_modules|bower_components)/,        loader: 'babel?presets[]=es2015'       }*/      // 图片配置      {        test:/\.png$/,        // ?后面配置的是属性 小于1(1024)KB转为base64 [exports]后缀 [name]源文件名 url-loader改成file-loader就可以 最好用绝对路径        loader:"url-loader?limit=1024&name=/img/[hash:8].[name].[exports]"      }    ]  },  // 插件选项  plugins:[  // 热加载模块    new webpack.HotModuleReplacementPlugin(),  // css模块提取    extractCSS,  // html模块    new HtmlWebpackPlugin({      // title:'wos',      filename:'../index.html',      // 模板位置。建议写绝对路径      template:__dirname+'/src/tpl/index.html',      // 更新到哪里,在body      inject:'body',      // 尽量减少这些模板的使用      info:'Hello'     }),  // js压缩    new webpack.optimize.UglifyJsPlugin({      compress: {        warnings: false      }    }),    // 一个引进jq的插件    new webpack.ProvidePlugin({      $:'jquery'    }),    // 共享插件块 每一个页面都有这个 这个方法只能用一次    // new webpack.optimize.CommonsChunkPlugin('v','lib/jquery.min.js') 提取公共代码    new webpack.optimize.CommonsChunkPlugin({      // 只能写a 和 b 不能写a.js和b.js      // name 是配置文件里面入口文件的键名,filename 是输出的文件名。      names:['a','b']      // filename: [c,d],    })    // 提供公共代码    // 默认会把所有入口节点的公共代码提取出来,生成一个common.js    // 只提取main节点和index节点    // new webpack.optimize.CommonsChunkPlugin('common.js',['main','index']),    // 推荐    // new webpack.optimize.CommonsChunkPlugin({     //      name:'common', // 注意不要.js后缀     //      chunks:['main','user','index']     //    }),  ],  // 扩展 cdn的方式 比如项目很大,就用自己的cdn  // externals:{  //   jquery:"http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"  // }  // watch:true}