研究了一段时间的webpack，终于有了一些收获。虽然我检查了很多东西，但我也经历了很多陷阱；个人认为reactjs+es6项目适合webpack和多页移动端项目；我不会在这里讨论这个概念。重复一遍，您可以在Internet上找到很多东西。文件目录根目录app//源文件cssjsindex.htmlindex.js//入口文件package.jsonwebpack.config.js//配置文件README.md//描述文件安装包依赖{"name":"webpack-html5","version":"1.0.0","description":"","scripts":{"watch":"webpack--progress--colors--watch"//监听文件变化并执行编译，npmrunwatch},"author":"azq","license":"ISC","devDependencies":{"autoprefixer-loader":"^3.2.0",//css自动添加浏览器前缀，w3c标准"babel-core":"^6.14.0",//编译js"babel-loader":"^6.2.5",//编译js"babel-preset-es2015":"^6.14.0",//编译es6es5"babel-preset-react":"^6.11.1",//编译jsx"clean-webpack-plugin":"^0.1.10",//清空文件"css-loader":"^0.23.1",//压缩css"extract-text-webpack-plugin":"^1.0.1",//这应该是解压css的"file-loader"":"^0.8.5",//"html-loader”用于处理文件：“^0.4.3”，//“html-webpack-plugin”用于处理html：“^2.9.0”，//html模板“jquery”：“^3.1.1”，//jquery模块“少”：“^2.6.0”,//lesscore"less-loader":"^2.2.2",//编译less"postcss-px2rem":"^0.3.0",//px转换rem"react":"^15.3.2",//反应核心"react-dom":"^15.3.2",//反应核心"style-loader":"^0.13.0",//加载器"url-loader":"^0.5.7",//类似file-loader，可以设置文件大小转换url数据"webpack":"^1.12.13","webpack-dev-server":"^1.16.1"}}webpack配置constpath=require('path');constwebpack=require('webpack');constHtmlWebpackPlugin=require('html-webpack-plugin');constCleanPlugin=require('clean-webpack-plugin');constROOT_PATH=路径。resolve(__dirname);//根目录constAPP_PATH=path.resolve(ROOT_PATH,'app');//源文件目录constBUILD_PATH=path.resolve(ROOT_PATH,'build');目标输出目录constExtractTextPlugin=require("extract-text-webpack-plugin");constpx2rem=require('postcss-px2rem');module.exports={entry:{//entry,defaultindex.jsapp:APP_PATH,vendor:['jquery','react','react-dom']//单独打包},output:{//输出配置路径:BUILD_PATH,publicPath:"./",filename:'bundle.js'},plugins:[newCleanPlugin('build'),//Seikubulidnewwebpack.optimize.UglifyJsPlugin({compressor:{warnings:false,},except:['$super','$','exports','require']//排除键}),newwebpack.optimize.OccurenceOrderPlugin(),newHtmlWebpackPlugin({template:APP_PATH+'\\index.html',inject:'true'}),newExtractTextPlugin("styles.css"),newwebpack.DefinePlugin({'process.env':{'NODE_ENV':JSON.stringify('production')}}),newwebpack.ProvidePlugin({//提供所有站$:"jquery",jQuery:"jquery","window.jQuery":"jquery",React:"react",ReactDom:"react-dom"}),newwebpack.optimize.CommonsChunkPlugin('供应商','供应商.bundle.js'),//商店内的供应商包],postcss:()=>{return[px2rem({remUnit:64})];//使用64位基准删除px2rem},module:{loaders:[{//compressionandpx2remtest:/\.css$/,loader:ExtractTextPlugin.extract('style!css!postcss')},{//less编译和前缀测试：/\.less/,loader:ExtractTextPlugin.extract('css!auto??prefixer!less')},{//jsx编译测试：/\.jsx?$/,exclude:/(node_modules|bower_components)/,loader:'babel',query:{presets:['react','es2015']},},{//html模板加载设备可以处理引用的静态资源。默认配置参数attrs=img:src处理图像src引用的资源。//比如你配置attrs=img:srcimg:data-src也可以处理data-src引用资源，像这样test:/\.html$/,loader:"html?-minimize&attrs=img:srcimg:data-src"},{//文件加载器，处理文件静态资源test:/\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader:'file-loader?name=./fonts/[name].[ext]'},{//图片加载器，类似file-loader，比较适合图片，可以将较小的图片转成base64，减少http请求url-loader?limit=8192&name=./img/[name].[ext]'},{test:/\.json$/,loader:'file-loader?name=./[name].[ext]]'}]}}ps：评论可能不准确。我希望自己检查条目文件。此处以及测试演示中使用了es6语法。如果不使用es6，可以去掉相关的es6编译，然后如何导入代码使用require参考import'./css/base.less';import'./css/index.less';import'./js/comments.json';//用来模拟ajax数据导入'./js/ProductBox.jsx';otherfilesProductBox.jsx//这段代码是在网上学习reactjs的时候看到的，然后做了一些修改{this.props.children}
