开发环境配置

在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些。

这里主要说三个 :1.css模块化;2.模块热替换功能;3.source-map(代码映射)

// 开发环境打包配置

const path = require('path');
const webpack = require('webpack');
const base = require('./webpack.config.base')
const dfPath = require('./path')
// webpack配置合并工具
const merge =require('webpack-merge') const RS = (...arg)=>path.resolve( __dirname , ...arg ) // 合并方式配置
let strategyMerge = merge.strategy({
entry: 'prepend'
}); let config = {
entry: {
app: path.resolve(dfPath.root,'src/app.js')
}, output: {
path: dfPath.dist,
filename: '[name].bundle.js',
publicPath: '/',
chunkFilename: '[name].sepChunk.js'
},
module:{
rules: [
{
test: /\.js$/,
use:['babel-loader'],
exclude: [
dfPath.node_modules
]
},
{
test:/\.css$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
// css模块化,方便多人开发
module:true,
// 定义模块化css后的类名(默认为hash值,可读性差)path:路劲; name:文件名; local:本地定义的className
localIdentName: '[path][name]__[local]--[hash:base64:5]'
},
}
],
// 排除的文件,遇到这些文件不会用当前 loader 处理,也就不会模块化
exclude:[
RS('./src/common'),
RS('node_modules')
]
},
{
test:/\.css$/,
use:['style-loader','css-loader'],
include:[
RS('./src/common'),
RS('node_modules')
] }, {
test: /\.(png|jpg|jpeg|gif)$/,
use: ['url-loader?limit=8192'],
}
]
},
plugins:[
// 模块热替换功能
new webpack.HotModuleReplacementPlugin()
], // 代码映射,方便报错时,找到对应的源代码
devtool: 'cheap-module-eval-source-map', devServer:{
// 服务器打包后,输出的资源路劲
publicPath:'/',
open:true
}
}; // 导出合并后的webpack配置
module.exports = strategyMerge( base , config );

生产环境

相比开发环境,生产环境打包是要最后发布到服务器部署的代码,我们需要尽量保持代码简洁,加载性能最优,不需要调试辅助工具。

我们从这几个方面优化 :1.公共模块拆分,单独打包;2. css文件分离,单独打包输出;3.代码压缩;

// 生产环境配置
const webpack = require('webpack');
const base = require('./webpack.config.base')
const path = require('path');
const dfPath = require('./path');
const merge = require('webpack-merge'); // 压缩工具
const ClosureCompilerPlugin = require('webpack-closure-compiler');
// css单独打包插件
const extractTextWebpackPlugin = require('extract-text-webpack-plugin'); const extractCSS = new extractTextWebpackPlugin('assets/css/[name]_[contenthash:6].css'); // weback合并配置
let strategyMerge = merge.strategy({
entry: 'replace',
output: 'replace',
module:{
rules: 'replace'
}
}); let config ={ entry: {
// 公共模块拆分,这些代码会单独打包,一般我们会把引用的框架文件拆分出来,方便浏览器缓存,节省资源。
vender:['react'],
app: path.resolve(dfPath.root,'src/app.js')
}, output: {
path: dfPath.dist,
filename: 'assets/js/[name]_[chunkhash].bundle.js',
publicPath: '/',
chunkFilename: 'assets/js/[name].sepChunk.js',
hashDigestLength: 6
}, module:{
rules: [
{
test: /\.js$/,
use:['babel-loader'],
exclude: [
dfPath.node_modules
]
},
/* 开启 css单独打包 和 css模块化的配置 */
{
test: /\.css$/,
use: extractCSS.extract({
use: [
{
loader: 'css-loader',
options:{
modules: true
}
}
]
})
}, {
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options:{
limit:8192,
name: '[name]_[hash].[ext]',
outputPath: 'assets/img/'
}
}
],
}, {
test: /\.(mp4|ogg|svg|ico)$/,
use: [
{
loader: 'file-loader',
options:{
name: '[name]_[hash].[ext]',
outputPath: 'assets/media/'
}
}
]
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
use: [ {
loader: 'url-loader',
options:{
limit:10000,
name: '[name]_[hash].[ext]',
outputPath: 'assets/font/',
mimetype: 'application/font-woff'
}
}
]
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options:{
limit:10000,
name: '[name]_[hash].[ext]',
outputPath: 'assets/font/',
mimetype: 'application/octet-stream'
}
}
]
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options:{
name: '[name]_[hash].[ext]',
outputPath: 'assets/font/',
}
}
]
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options:{
limit:10000,
name: '[name]_[hash].[ext]',
outputPath: 'assets/font/',
mimetype: 'image/svg+xml'
}
}
]
}, ]
}, plugins:[
extractCSS, // 设置 process.env(生产环境) 环境变量的快捷方式。
new webpack.EnvironmentPlugin({
NODE_ENV: 'production'
})
,new ClosureCompilerPlugin()
], devtool: 'source-map'
}; module.exports = strategyMerge(base,config);

webpack开发环境配置和生产环境配置的更多相关文章

  1. 【Spring】使用@Profile注解实现开发、测试和生产环境的配置和切换,看完这篇我彻底会了!!

    写在前面 在实际的企业开发环境中,往往都会将环境分为:开发环境.测试环境和生产环境,而每个环境基本上都是互相隔离的,也就是说,开发环境.测试环境和生产环境是互不相通的.在以前的开发过程中,如果开发人员 ...

  2. Tomcat与Jre绿色环境配置(生产环境)

    Tomcat与Jre绿色环境配置(生产环境) 博客分类: Apache Java jreapachetomcat  Tomcat运行时需要jre的支持,一般有两种方式,一种是用jdk带的jre,另一种 ...

  3. CentOS8本地安装Redash中文版,并且配置为生产环境

    Centos8内置的Python为3.6.8版本,以下是在内置Python3.6.8基础上的安装步骤.由于安装多版本Python会导致系统底层库需要下载源码重新编译,比较麻烦,不建议在多版本Pytho ...

  4. Spring.profile配合Jenkins发布War包,实现开发、测试和生产环境的按需切换

    前两篇不错 Spring.profile实现开发.测试和生产环境的配置和切换 - Strugglion - 博客园https://www.cnblogs.com/strugglion/p/709102 ...

  5. vue配置开发,测试,生产环境api

    npm run build 调用开发环境接口,打包开发环境npm run build:test 调用测试环境接口,打包测试环境npm run build:prod 调用生产环境接口,打包生产环境 vu ...

  6. Spring.profile实现开发、测试和生产环境的配置和切换

    软件开发过程一般涉及“开发 -> 测试 -> 部署上线”多个阶段,每个阶段的环境的配置参数会有不同,如数据源,文件路径等.为避免每次切换环境时都要进行参数配置等繁琐的操作,可以通过spri ...

  7. IDEA开发、测试、生产环境pom配置及使用

    pom文件 一般放在最下面,project里 <!--开发环境.测试环境.生产环境--> <!--生产环境--> <profiles> <profile> ...

  8. vue-cli 3.0 axios 跨域请求代理配置及生产环境 baseUrl 配置

    1. 开发环境跨域配置 在 vue.config.js 文件中: module.exports = { runtimeCompiler: true, publicPath: '/', // 设置打包文 ...

  9. Vue Nginx反向代理配置 解决生产环境跨域

    Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://mov ...

随机推荐

  1. NDK配置debug环境时:Error:FAILURE: Build failed with an exception

    Error:FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:ex ...

  2. Zabbix 3.2.4至3.2.7的升级方案

    1.关闭Zabbix Server 防止有新的数据提交到数据库中,也可以关闭数据库.如果更新过程中,评估告警信息可以忽略,可以先执行备份操作. 1.1.检查当前版本 /usr/local/zabbix ...

  3. yii2高级模板使用一个域名管理前后台

    yii2的高级模板分为backend和frontend,最开始用yii的时候并没怎么在意,就使用了两个域名分别解析前后台.今天无意间看见 可以使用一个域名指向前后台. 1.修改 advanced/ba ...

  4. java字符串以及字符类型基础

    介绍一下java字符集和字符的编码方式, 首先要区分一下字符集和字符编码.所谓的字符集 类似于unicode,GB2312,GBK,ASCII等等.因为一开始只有26个英文字母需要 编一下号.所有用下 ...

  5. CodeForces-749B

    给定3个坐标,求可能构成平行四边形的第四个点,枚举两个点,根据这两个点的横纵坐标差,来得到第四个点的坐标,注意生成的坐标需要判重. AC代码: #include<cstdio> #incl ...

  6. H3C虚拟化之IRF

    SA system-view irf domain 10 irf member 1 ren 1 y int ten 1/0/50 shu qu irf-port 1/1 port group int ...

  7. php 变量原理讲解

    php 变量原理讲解 一.变量概念   所谓变量,是指在程序中其值可以变化的量. 程序是管理和处理数据的.在程序运行过程中,我们需要存贮这些数据,变量和常量就是用于保存程序运行时的数据的. 变量通常由 ...

  8. redis内存数据库C客户端hiredis API 中文说明

    A)编译安装 make make install (/usr/local) make install PREFIX=$HOME/progs(可以自由指定安装路径) B)同步的API接口 redisCo ...

  9. 一句python,一句R︱模块导入与查看、数据读写出入、数据查看函数、数据类型、遍历文件

    先学了R,最近刚刚上手python,所以想着将python和R结合起来互相对比来更好理解python.最好就是一句python,对应写一句R. pandas中有类似R中的read.table的功能,而 ...

  10. mongodb去除重复的数据(二)

    前天因为工作需要,开始着手对数据库中两千多万的数据中其中一个字段重复的数据进行去重. 原本使用一些测试的数据测试后,前天写的那个方法是可行的,但是当面对这个两千万的真实数据时,我却发现这方法有些不顶用 ...