react webpack config

1

var webpack = require('webpack');
const path = require('path');
//将你的样式提取到单独的css文件里，如果没有它的话，webpack会将css打包到js当中 //var ExtractTextPlugin = require('extract-text-webpack-plugin');  module.exports = { entry: { addclient:'./js/mobile_modules/addclient.js', addcustomer:['./js/mobile_modules/addcustomer.js'], avatar:'./js/mobile_modules/avatar.js', BusinessCustomers:'./js/mobile_modules/BusinessCustomers.js', client:'./js/mobile_modules/client.js', corditem:'./js/mobile_modules/corditem.js', CustomerDetails:'./js/mobile_modules/CustomerDetails.js', getcode:'./js/mobile_modules/getcode.js', //用户登录页面 historyrecord:'./js/mobile_modules/historyrecord.js', index:'./js/mobile_modules/index.js', infomationedit:'./js/mobile_modules/infomationedit.js', informationfile:'./js/mobile_modules/informationfile.js', Kpiinquire:'./js/mobile_modules/Kpiinquire.js', login:'./js/mobile_modules/login.js', mark:'./js/mobile_modules/mark.js', myinformation:'./js/mobile_modules/myinformation.js', Photoshare:'./js/mobile_modules/Photoshare.js', Planreview:'./js/mobile_modules/Planreview.js', product:'./js/mobile_modules/product.js', productarticle:'./js/mobile_modules/productarticle.js', productDetail:'./js/mobile_modules/productDetail.js', purchase:'./js/mobile_modules/purchase.js', remark:'./js/mobile_modules/remark.js', sale:'./js/mobile_modules/sale.js', search:'./js/mobile_modules/search.js', signin:['./js/mobile_modules/signin.js'], stock:'./js/mobile_modules/stock.js', Storelocation:'./js/mobile_modules/Storelocation.js', testlogin:'./js/mobile_modules/testlogin.js', testproducts:'./js/mobile_modules/testproducts.js', Videoshare:'./js/mobile_modules/Videoshare.js', signin1:['./js/mobile_modules/signin1.js'], vipclienList:['./js/mobile_modules/vipclienList.js'], vipclientInfo:['./js/mobile_modules/vipclientInfo'], addvipclien:['./js/mobile_modules/addvipclien.js'], educationalAssessment:'./js/mobile_modules/KPIassessment/educationalAssessment.js', KPIassessment:'./js/mobile_modules/KPIassessment/KPIassessment.js', attendanceDetails:'./js/mobile_modules/KPIassessment/attendanceDetails.js', salesResults:'./js/mobile_modules/KPIassessment/salesResults.js', meeting:'./js/mobile_modules/meeting/meeting.js', addmeeting:'./js/mobile_modules/meeting/addmeeting.js', }, output: { filename: './js/mobile/[name].js', publicPath: '/' }, externals:{ 'react':'React', "react-dom": "ReactDOM" }, resolve: { modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')], extensions: ['', '.web.js', '.js', '.json'], }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.less$/, exclude: /node_modules/,loader: 'style-loader!css-loader!less-loader' }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react'}, {// 如果要加载jQuery插件,解析路径&参数 test : "./js/utils/jquery/*.js$", loader : "'imports?jQuery=jquery,$=jquery,this=>window" } ] }, plugins : [ new webpack.ProvidePlugin({// 全局依赖jQuery,不需要import了 React: "React", ReactDOM:"React-DOM", $ : "jquery", jQuery : "jquery", "window.jQuery" : "jquery" }) ] ["antd", { style: 'css', // 'less', libraryName: 'antd-mobile', }] }

2 pc

 

var path = require('path');
var glob = require('glob');
var ExtractTextPlugin = require("extract-text-webpack-plugin"); var HtmlWebpackPlugin = require('html-webpack-plugin'); var CleanPlugin = require('clean-webpack-plugin'); var CopyWebpackPlugin = require('copy-webpack-plugin'); var webpack = require('webpack'); //webpack --config 文件名.js -w /*执行另一个配置文件*/ /* babel-preset-stage-0 没有--save的模块*/ var config = { entry: { index: './js/main.js' }, output: { path: './build/', filename: 'js/[name].[chunkhash].js', chunkFilename: '[id].[chunkhash].js' }, module: { loaders: [ // { test: /\.css$/, loader: 'style-loader!css-loader' }, {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}, {test: /\.less$/, loader: 'style-loader!css-loader!less-loader'}, {test: /\.js$/, loader:"babel",query:{presets:["es2015","stage-0","react"]}}, {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}, ] }, plugins: [ new CleanPlugin(['./build/*']), new CopyWebpackPlugin([ {from: './images', to: 'images'}, {from: './fonts', to: 'fonts'}, {from: './css', to: 'css'} ]), // 公共CSS名字和路径 new ExtractTextPlugin("css/[name].[chunkhash].css"), // 把公共文件提取出来 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, './node_modules') ) === 0 ) } }), /*压缩*/ // new webpack.optimize.UglifyJsPlugin({ // compress: { // warnings: false // } // }), new webpack.ProvidePlugin({// 全局依赖jQuery,不需要import了 $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ] }; module.exports = config; var pages = Object.keys(getEntry('./*.html')); //生成HTML模板 pages.forEach(function (pathname) { var conf = { filename: pathname + '.html', //生成的html存放路径,相对于path template: './' + pathname + '.html', //html模板路径 inject: true, //允许插件修改哪些内容,包括head与body hash: false, //是否添加hash值 minify: { //压缩HTML文件 removeComments: true,//移除HTML中的注释 collapseWhitespace: true //删除空白符与换行符  }, chunksSortMode: 'dependency', chunks: [pathname,"vendor"] }; config.plugins.push(new HtmlWebpackPlugin(conf)); }); //按文件名来获取入口文件(即需要生成的模板文件数量) function getEntry(globPath) { var files = glob.sync(globPath); var entries = {}, entry, dirname, basename, pathname, extname; for (var i = 0; i < files.length; i++) { entry = files[i]; dirname = path.dirname(entry); extname = path.extname(entry); basename = path.basename(entry, extname); pathname = path.join(dirname, basename); entries[pathname] = entry; } return entries; }

 

 

3、webpack-dev-config.js

 

/**
 * 开发模式下的webpack配置
 * 在整个项目开发过程中，几乎99%的时间都是在这个模式下进行的
 * 注意。两种模式的配置有较大差异！！
 */

const path = require('path');
import webpack from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin' import precss from 'precss' import autoprefixer from 'autoprefixer' import rucksackCss from 'rucksack-css' import px2rem from 'postcss-pxtorem'; const px2remOpts = { rootValue: 100, propWhiteList: [], }; const svgDirs = [ require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件 path.resolve(__dirname, 'src/svgs'), // 2. 自己私人的 svg 存放目录 ]; export default { debug: true, devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool noInfo: true, // set to false to see a list of every file being bundled.  entry: [ './src/webpack-public-path', // 服务器静态资源路径配置，保证首先载入 'react-hot-loader/patch', 'webpack-hot-middleware/client?reload=true', path.resolve(__dirname, 'src/js/index.js') ], target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test  output: { path: `${__dirname}/src`, // Note: Physical files are only output by the production build task `npm run build`. publicPath: '/', filename: 'bundle.js' }, plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom) __DEV__: true }), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS. template: 'src/index.html', title: '开发模式', favicon: './src/otc.ico', minify: { removeComments: true, collapseWhitespace: true }, hash: true, // 这样每次客户端页面就会根据这个hash来判断页面是否有必要刷新 // 在项目后续过程中，经常需要做些改动更新什么的，一但有改动，客户端页面就会自动更新！ inject: 'body' }), new webpack.ProvidePlugin({// 全局依赖jQuery,不需要import了 $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ], resolve: { modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')], extensions: ['', '.web.js', '.js', '.json'], // 路径别名, 懒癌福音  alias: { app: path.resolve(__dirname, 'src/js'), // 以前你可能这样引用 import { Nav } from '../../components' // 现在你可以这样引用 import { Nav } from 'app/components'  style: path.resolve(__dirname, 'src/styles') // 以前你可能这样引用 import "../../../styles/mixins.scss" // 现在你可以这样引用 import "style/mixins.scss" // 注意：别名只能在.js文件中使用。  } }, module: { loaders: [ { test: /\.js$/, loaders: ['babel'], exclude: /node_modules/ }, { test: /\.less$/, include: path.resolve(__dirname, 'src/js'), loaders: [ 'style', 'css?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]', 'less' ] }, // 组件样式，需要私有化，单独配置  { test: /\.less$/, include: path.resolve(__dirname, 'src/styles'), loader: 'style-loader!css-loader!less-loader' }, // 公有样式，不需要私有化，单独配置  { test: /\.css$/, include: path.resolve(__dirname, 'node_modules'), loader: 'style!css!postcss' }, { test: /\.(svg)$/i, loader: 'svg-sprite', include:svgDirs, }, { test: /\.(otf|eot|ttf|woff|woff2).*$/, loader: 'url?limit=10000' }, { test: /\.(gif|jpe?g|png|ico)$/, loader: 'url?limit=10000' }, ] }, postcss: () => [precss, autoprefixer, rucksackCss, px2rem(px2remOpts)] };

4、webpack-pro-config.js

 

/**
 * 产品模式下的webpack配置
 *
 * 注意。两种模式的配置有较大差异！！
 */
var path = require('path');
var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const pxtorem = require('postcss-pxtorem'); // webpack中生成HTML的插件，  const svgDirs = [ require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件 path.resolve(__dirname, 'src/svgs'), // 2. 自己私人的 svg 存放目录 ]; module.exports = { entry: { // 文件入口配置 index: './src/js/index', vendor: [ 'react', 'react-dom', 'react-router', 'jquery' ] // 为了优化，切割代码，提取第三方库（实际上，我们将会引入很多第三方库）  }, // 页面入口文件配置  output: { // 文件输出配置  path: path.join(__dirname, 'dist'), // 输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它.  publicPath: '', // 模板、样式、脚本、图片等资源对应的server上的路径  filename: 'bundle.js' // 命名生成的JS  }, plugins: [ new webpack.optimize.OccurrenceOrderPlugin(), // webapck 会给编译好的代码片段一个id用来区分 // 而这个插件会让webpack在id分配上优化并保持一致性。 // 具体是的优化是：webpack就能够比对id的使用频率和分布来得出最短的id分配给使用频率高的模块 // 压缩代码 // new webpack.optimize.UglifyJsPlugin({ // compressor: { // warnings: false // } // }), new webpack.ProvidePlugin({// 全局依赖jQuery,不需要import了 $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production'), __DEV__: false }), // 很多库的内部，有process.NODE_ENV的判断语句， // 改为production。最直观的就是没有所有的debug相关的东西，体积会减少很多 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js' ), // 'vendor' 就是把依赖库(比如react react-router, redux)全部打包到 vendor.js中 // 'vendor.js' 就是把自己写的相关js打包到bundle.js中 // 一般依赖库放到前面，所以vendor放第一个 new HtmlWebpackPlugin({ template:'src/index.html', // html模板的路径  title: '品牌俱乐部', filename:'index.html', // 文件名以及文件将要存放的位置  favicon:'./src/otc.ico', // favicon路径  inject:'body', // js插入的位置，true/'head' false/'body'  chunks: ['vendor', 'index' ], // 指定引入的chunk，根据entry的key配置，不配置就会引入所有页面的资源  hash:true, // 这样每次客户端页面就会根据这个hash来判断页面是否有必要刷新 // 在项目后续过程中，经常需要做些改动更新什么的，一但有改动，客户端页面就会自动更新！  minify:{ // 压缩HTML文件 removeComments:true, // 移除HTML中的注释  collapseWhitespace:true // 删除空白符与换行符  } }) ], resolve: { // 实际就是自动添加后缀，默认是当成js文件来查找路径 // 空字符串在此是为了resolve一些在import文件时不带文件扩展名的表达式 modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')], extensions: ['', '.web.js', '.js', '.json'], // 路径别名, 懒癌福音  alias:{ app:path.resolve(__dirname,'src/js'), // 以前你可能这样引用 import { Nav } from '../../components' // 现在你可以这样引用 import { Nav } from 'app/components'  style:path.resolve(__dirname,'src/styles') // 以前你可能这样引用 import "../../../styles/mixins.scss" // 现在你可以这样引用 import "style/mixins.scss" // 注意：别名只能在.js文件中使用。  } }, module: { loaders: [ { test: /\.js$/, loaders: ['babel'], exclude: /node_modules/ }, { test: /\.less$/, include: path.resolve(__dirname, 'src/js'), loaders: [ 'style', 'css?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]', 'less' ] }, // 组件样式，需要私有化，单独配置  { test: /\.less$/, include: path.resolve(__dirname, 'src/styles'), loader: 'style-loader!css-loader!less-loader' }, // 公有样式，不需要私有化，单独配置  { test: /\.css$/, include: path.resolve(__dirname, 'node_modules'), loader: 'style!css!postcss' }, { test: /\.(svg)$/i, loader: 'svg-sprite', include:svgDirs, }, { test: /\.(otf|eot|ttf|woff|woff2).*$/, loader: 'url?limit=10000' }, { test: /\.(gif|jpe?g|png|ico)$/, loader: 'url?limit=10000' }, ] }, postcss: function () { return [ require('precss'), require('autoprefixer'), require('rucksack-css'), pxtorem({ rootValue: 100, propWhiteList: [], }) ]; } };

 

转载于:https://www.cnblogs.com/webqiand/articles/11136705.html