做影视网站被告怎么办,seo数据优化教程,网易那个自己做游戏的网站是什么,网站代运营要多少费用吗前言 使用当前的webpack配置能不能打包构建项目呢#xff1f;当然可以#xff0c;但这不是我们想要的#xff0c;所以#xff0c;让我们来看一看生产环境需要怎么配置webpack吧 开发 生产环境配置 在根目录创建webpack.pro.config.jsconst path require(path)
const webpa…前言 使用当前的webpack配置能不能打包构建项目呢当然可以但这不是我们想要的所以让我们来看一看生产环境需要怎么配置webpack吧 开发 生产环境配置 在根目录创建webpack.pro.config.jsconst path require(path)
const webpack require(webpack)
const HtmlWebpackPlugin require(html-webpack-plugin)
const ExtractTextPlugin require(extract-text-webpack-plugin)module.exports {entry:{main:[babel-polyfill,./src/index.js], vendors: [react,react-dom,react-router-dom,whatwg-fetch]},output:{path:path.resolve(__dirname,dist),filename:bundle.[hash:4].js},module:{rules:[{ test: /\.(woff|eot|ttf|svg|png|jpg)$/, use: [ { loader: url-loader, options: { limit: 1024 ,name: [name].[hash:4].[ext] } }, ] },{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,use: [ { loader: url-loader, options: { limit: 1024,name: [name].[hash:4].[ext] } }, ] },{test: /\.(css|less)$/,use: ExtractTextPlugin.extract({fallback: style-loader,use: [css-loader,less-loader]})},{test:/\.(js|jsx)$/,use:babel-loader,exclude:/node_modules/}]},devtool: false,plugins:[// html 模板插件new HtmlWebpackPlugin({template:./src/index.html,favicon: ./public/favicon.png}),// 启用作用域提升,让代码文件更小、运行的更快new webpack.optimize.ModuleConcatenationPlugin(),// 提取公共代码vendorsnew webpack.optimize.CommonsChunkPlugin({name:vendors,filename:[name].[hash:4].js}),// 抽离出cssnew ExtractTextPlugin(style.css),// 压缩js代码new webpack.optimize.UglifyJsPlugin({compress: {warnings: false,drop_console: true,pure_funcs: [console.log]}}),// 定义全局常量new webpack.DefinePlugin({process.env: {NODE_ENV: JSON.stringify(production)}}),// 加署名new webpack.BannerPlugin(Copyright by Zero https://github.com/l-Lemon/blog)]
}
复制代码在package.json的 script 中加入 build: webpack --config webpack.pro.config.js
复制代码运行 npm run build 根目录会生成 dist文件夹 和压缩后的代码。 抽离公共的webpack配置 我们发现生产环境和开发环境中的webpack配置有很多相同的配置为了维护性我们最好抽离出来。 创建webapck.base.js文件来存我们公共配置const path require(path)
const HtmlWebpackPlugin require(html-webpack-plugin)
const ExtractTextPlugin require(extract-text-webpack-plugin)
// 抽离css
const extractCss new ExtractTextPlugin(style.css)
// html 模版
const htmlTemplate new HtmlWebpackPlugin({template:./src/index.html,favicon: ./public/favicon.png})
const config {output:{path:path.resolve(__dirname,dist),filename:bundle.[hash:4].js},module:{rules:[{ test: /\.(woff|eot|ttf|svg|png|jpg)$/, use: [ { loader: url-loader, options: { limit: 1024 ,name: [name].[hash:4].[ext] } }, ] },{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,use: [ { loader: url-loader, options: { limit: 1024,name: [name].[hash:4].[ext] } }, ] },{test: /\.(css|less)$/,use: ExtractTextPlugin.extract({fallback: style-loader,use: [css-loader,less-loader]})},{test:/\.(js|jsx)$/,use:babel-loader,exclude:/node_modules/}]},
}module.exports {htmlTemplate,extractCss,config
}
复制代码重构开发环境配置 修改开发环境的webpack.config.js为const path require(path)
const baseConfig require(./webpack.base)module.exports {entry:{main:[babel-polyfill,./src/index.js],},...baseConfig.config,plugins:[baseConfig.htmlTemplate,baseConfig.extractCss],devServer:{contentBase: path.join(__dirname, dist),compress: true,port: 9000,proxy: {/api: {target: http://127.0.0.1:3000/,pathRewrite: {^/api : }}}}
}
复制代码重构生产环境配置 修改开发环境的webpack.pro.config.js为const webpack require(webpack)
const baseConfig require(./webpack.base)module.exports {entry:{main:[babel-polyfill,./src/index.js],// 将第三方库包单独打包充分利用浏览器缓存 vendors: [react,react-dom,react-router-dom,whatwg-fetch]},...baseConfig.config,devtool: false,plugins:[// html 模板插件baseConfig.htmlTemplate,// 启用作用域提升,让代码文件更小、运行的更快new webpack.optimize.ModuleConcatenationPlugin(),// 提取公共代码vendorsnew webpack.optimize.CommonsChunkPlugin({name:vendors,filename:[name].[hash:4].js}),// 抽离出cssbaseConfig.extractCss,// 压缩js代码new webpack.optimize.UglifyJsPlugin({compress: {warnings: false,drop_console: true,pure_funcs: [console.log]}}),// 定义全局常量new webpack.DefinePlugin({process.env: {NODE_ENV: JSON.stringify(production)}}),// 加署名new webpack.BannerPlugin(Copyright by Zero https://github.com/l-Lemon/blog)]
}
复制代码好了现在我们再来试试npm run dev和npm run build命令没问题都可以完美运行。 总结 这篇文章我们介绍了生产环境webpack的配置并且抽出了公共配置重构了开发环境和生产环境的配置。 下篇我们来介绍实现单元测试 系列文章 从零开始React项目架构(一)从零开始React项目架构(二)从零开始React项目架构(三)源码 React项目架构
