webpack配置
2015-09-18 21:49
531 查看
var webpack = require('webpack'); var path = require("path"); module.exports = { // context: __dirname + "/src",//The base directory (absolute path!) // 表示入口文件 cache: true, entry: { 'bundle': './src', // 'app2': '/src/app2' }, minimize: true, // 表示输出文件 output: { path: path.join(__dirname, "build"),// 编译好的文件目录 filename: '[name].min.js', chunkFilename: "[chunkhash].min.js" // sourceMapFilename: '[file].map' // publicPath: "/build/" // 引用你的文件时考虑使用的地址 }, // 表示这个依赖项是外部lib,遇到require它不需要编译, // 且在浏览器端对应window.React externals: [ { 'react': 'window.React', 'react-bootstrap': 'window.ReactBootstrap', 'jquery': 'window.jQuery' } ], module: { loaders: [ // 凡是遇到jsx结尾的,都用jsx-loader这个插件来加载, // 且启用harmony模式 //{ test: path.join(__dirname, 'es6'), loader: 'babel-loader' },'jsx-loader?harmony' { test: /\.js$/, loader: 'babel-loader!jsx-loader?harmony' }, { test: /\.jsx$/, loader: "jsx-loader?insertPragma=React.DOM" }, { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL // required for bootstrap icons { test: /\.woff$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" }, { test: /\.ttf$/, loader: "file-loader?prefix=font/" }, { test: /\.eot$/, loader: "file-loader?prefix=font/" }, { test: /\.svg$/, loader: "file-loader?prefix=font/" } ] }, resolve: { // 现在可以写 require('file') 代替 require('file.coffee') extensions: ['', '.webpack.js', '.coffee', '.json', '.js', '.jsx'], modulesDirectories: [ 'node_modules', 'bower_components', 'lib', 'src' ] // alias: { // // Bind version of jquery // jquery: "jquery-2.0.3", // // Bind version of jquery-ui // "jquery-ui": "jquery-ui-1.10.3", // // jquery-ui doesn't contain a index file // // bind module to the complete module // "jquery-ui-1.10.3$": "jquery-ui-1.10.3/ui/jquery-ui.js", // } }, devtool: 'source-map', plugins: [ new webpack.DefinePlugin({// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串 __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')), __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false')) }), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.CommonsChunkPlugin('common.min.js', 5), new webpack.ProvidePlugin({ // Automtically detect jQuery and $ as free var in modules // and inject the jquery library // This is required by many jquery plugins $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ] };
相关文章推荐
- Grunt、webpack个人笔记
- webpack 学习笔记 03 Code Splitting
- webpack 学习笔记 02 快速入门
- webpack 学习笔记 01 使用webpack的原因
- webpack学习笔记
- 关于将Webpack,编译文件输出到不同的目录下
- 一小时包教会 —— webpack 入门指南
- webpack echarts配置实例
- webpack模块依赖管理介绍
- Webpack 入门指迷--转载(题叶)
- 用webpack来取代browserify
- webpack速查
- Webpack初试
- webpack 使用加载器
- webpack 使用插件
- webpack 安装
- 一小时包教会 —— webpack 入门指南
- webpack学习 教程地址
- webpack 用法
- 学习笔记 一步步了解webpack