webpack 1.x构建react项目简单配置
2017-07-16 19:24
801 查看
这是我16年下半年开始接手的项目,当时刚学react和webpack相关的东西,这里稍微整理下。
直接上配置代码
这是开发配置
这是生产配置
直接上配置代码
这是开发配置
var path = require('path'); var webpack = require('webpack'); // var OpenBrowserPlugin = require('open-browser-webpack-plugin'); var HtmlwebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css单独打包 //定义了一些文件夹的路径 var ROOT_PATH = path.resolve(__dirname); // var APP_PATH = path.resolve(ROOT_PATH, 'app/js'); var APP_PATH = path.resolve(ROOT_PATH, 'app'); var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); //Template的文件夹路径 var TEM_PATH = path.resolve(ROOT_PATH, 'app/templates'); module.exports = { //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字 entry: { //入口文件 index: path.resolve(APP_PATH, 'index.js') //添加要打包在commons里面的库 // vendors: ['jquery', 'react', 'react-dom' ] // utils: ['./common/url', './common/formatDate'] }, //输出的文件名 合并以后的js会命名为bundle.js output: { path: BUILD_PATH, //注意 我们修改了bundle.js 用一个数组[name]来代替,他会根据entry的入口文件名称生成多个js文件,这里就是(app.js,mobile.js和vendors.js) //上hash这个参数生成Hash名称的script来防止缓存 filename: '[name].[chunk:5].js' }, externals: { 'jquery': 'jQuery', 'react': 'React', 'react-dom': 'ReactDOM', 'antd': 'antd' }, devtool: 'cheap-module-eval-source-map', devServer: { historyApiFallback: true, hot: true, inline: true, colors: true, port: 8888, proxy: { '/api/*': { target: 'http://localhost:8080', changeOrigin: true, secure: false } } }, resolve: { extensions: ['', '.js', '.jsx', '.less', '.scss', '.css']//后缀名自动补全 }, module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, { test: /\.(png|jpg)$/, //注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图 // loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]' loader: 'url?limit=8192&name=images/[name].[ext]' }, { test: /\.jsx?$/, loader: 'babel-loader', // include: APP_PATH, exclude: /node_modules/, query: { plugins: [ ["import", { libraryName: "antd", style: "css" }] ],// `style: true` 会加载 less 文件 presets: ['es2015', 'react'] } }, { test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader') } ] }, plugins: [ new ExtractTextPlugin('[name].css'), //创建了两个HtmlWebpackPlugin的实例,生成两个页面 new HtmlwebpackPlugin({ title: 'demo', template: path.resolve(TEM_PATH, 'index.html'), filename: 'index.html', //chunks这个参数告诉插件要引用entry里面的哪几个入口 chunks: ['index'], //要把script插入到标签里 inject: 'body' }), //自动打开该页面 // new OpenBrowserPlugin({ // url: 'http://127.0.0.1:8888' // }), new webpack.HotModuleReplacementPlugin() ] };
这是生产配置
var path = require('path'); var webpack = require('webpack'); // var OpenBrowserPlugin = require('open-browser-webpack-plugin'); var HtmlwebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css单独打包 var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css的插件 //定义了一些文件夹的路径 var ROOT_PATH = path.resolve(__dirname); // var APP_PATH = path.resolve(ROOT_PATH, 'app/js'); var APP_PATH = path.resolve(ROOT_PATH, 'app'); var BUILD_PATH = path.resolve(ROOT_PATH, 'dist'); //Template的文件夹路径 var TEM_PATH = path.resolve(ROOT_PATH, 'app/templates'); var config = module.exports = { //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字 entry: { //入口文件 index: path.resolve(APP_PATH, 'index.js') // mobile: path.resolve(APP_PATH, 'mobile.js'), //添加要打包在commons里面的库 // vendors: ['jquery', 'react', 'react-dom' ] // antd: ['antd'] // utils: ['./common/url', './common/formatDate'] }, //输出的文件名 合并以后的js会命名为bundle.js output: { path: BUILD_PATH, //注意 我们修改了bundle.js 用一个数组[name]来代替,他会根据entry的入口文件名称生成多个js文件,这里就是(app.js,mobile.js和vendors.js) //上hash这个参数生成Hash名称的script来防止缓存 filename: '[name].[chunkhash:6].js', }, externals: {//剔除单独引入的第三方库 'antd': 'antd', // 'react': 'React', // 'react-dom': 'ReactDOM', // 'jquery': 'jQuery' }, devtool: 'source-map', resolve: { extensions: ['', '.js', '.jsx', '.less', '.scss', '.css']//后缀名自动补全 }, module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, { test: /\.(png|jpg)$/, //注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图 loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]' }, { test: /\.jsx?$/, loader: 'babel-loader', // include: APP_PATH, exclude: /node_modules/, query: { presets: ['es2015', 'react'], plugins: ['transform-runtime', ['import', { libraryName: 'antd', style: 'css' }]] } }, { test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader') } ] }, plugins: [ //以下配置可以告诉 React 当前是生产环境,请最小化压缩 js ,即把开发环境中的一些提示、警告、判断通通去掉,直流以下发布之后可用的代码。 new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') //定义生产环境 } }), //把入口文件里面的数组打包成verdors.js // new webpack.optimize.CommonsChunkPlugin('vendors','commons/vendors.js'), // new webpack.optimize.CommonsChunkPlugin( // { // names: ['vendors'], // // filenames: ['vendors.js', 'utils.js'], // filename: '/js/[name].[chunkhash:6].js', // minChunks: Infinity // }), new ExtractTextPlugin('[name].[chunkhash:6].css'), //创建了两个HtmlWebpackPlugin的实例,生成两个页面 new HtmlwebpackPlugin({ title: 'title', template: path.resolve(TEM_PATH, 'index.html'), filename: 'dist/tggl.html', //chunks这个参数告诉插件要引用entry里面的哪几个入口 // chunks: ['posterManage', 'vendors'], chunks: ['extendManage'], //要把script插入到标签里 inject: 'body' }), //压缩css new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.optimize\.css$/g, cssProcessor: require('cssnano'), cssProcessorOptions: { discardComments: {removeAll: true } }, canPrint: true }), //这个使用uglifyJs压缩你的js代码 new webpack.optimize.UglifyJsPlugin({ output: { comments: false, // 去掉所有注释 }, compress: {//去掉警告和打印之类的 warnings: false, drop_debugger: true, drop_console: true } }) ] };
相关文章推荐
- 开始一个React项目(一)一个最简单的webpack配置
- webpack构建react项目的配置文件
- webpack构建React应用一:创建项目
- webpack从零开始构建项目之vue模板配置(二)
- webpack+react项目初体验——记录我的webpack环境配置
- vue + webpack 构建项目配置文件小记
- webpack 构建简单的vue项目
- 基于webpack+react+antd 项目构建
- Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面
- webpack构建vue项目(配置篇)
- (笔记)webpack安装、配置、简单的项目打包、插件介绍
- Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
- 使用webpack配置vue项目代理 (超简单)
- Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
- Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由
- webpack构建vue项目(配置篇)
- Vue2+VueRouter2+webpack 构建项目实战(五):配置子路由
- [react001] 使用webpack自动构建react 项目
- Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
- vuex在vue-cli和webpack构建的项目中的简单使用