【webpack学习笔记】a06-生产环境和开发环境配置
生产环境和开发环境的配置目标不一样,生产环境主要是让文件压缩得更小,更优化资源,改善加载时间。
而开发环境,主要是要开发更方便,更节省时间,比如调试比如自动刷新。
所以可以分开配置不同的开发环境,然后需要哪种用哪种。
配置流程实践记录:
- 新建项目文件夹 demo
- 初始化
npm init
- 安装 webpack 和 webpack-cli
npm install --save-dev webpack webpack-cli
4.建立一个源代码文件夹src,打包文件夹dist。并在src中建立一个index.hml模板文件,和index.js入口文件
5.安装webpack-merge
用于分离配置,并建立三个配置文件,一个公用(webpack.common.js)一个用于生产环境(webpack.prod.js)一个生产环境(webpack.dev.js)
npm install --save-dev webpack-merge
6.编写公共配置文件webpack.common.js,同时安装需要用到的插件
npm install --save-dev html-webpack-plugin //用于html文件模板跟踪
npm install --save-dev clean-webpack-plugin //用于清理dist文件夹
也可以一起下载
npm install --save-dev html-webpack-plugin clean-webpack-plugin
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-wepback-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry:{
app: './src/index.js'
},
plugin:[
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production',
filename:'index.html',
template: './src/index.html', //模板
inject: 'body'
})
]
}
7.开发环境配置webpack.dev.js
安装webpack-dev-server
npm install --save-dev webpack-dev-server
webpack.dev.js
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer:{
hot:true, //开启模块热替换
contentBase: './dist' //告诉devServer在dist文件找文件
},
plugins:[
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin() //开启模块热替换
],
output:{
filename:'[name].bundle.js',
path:path.resolve(__dirname,'dist')
}
});
8.配置生产环境webpack.prod.js
npm install --save-dev uglifyjs-webpack-plugin //用于删除没有用到的代码,减少压缩文件体积
webpack.prod.js
const merge = require('webpack-merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
plugins:[
new UglifyJsPlugin({
sourceMap: true
})
],
output:{
//生产环境加入hash值(版本号)
filename:'[name]-[hash:5].bundle.js',
path:path.resolve(__dirname,'dist')
}
})
9.配置 package.json npm scripts
开发脚本
package.json scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
以上呢就配置得差不多了,剩下就是来编写我们的内容脚本
index.js
import { mulb } from './mach.js'
function component(){
var element = document.createElement('pre');
element.innerHTML = [
'Hello 2019 ~',
'12 mulb is :' + mulb(12)
].join('\n\n')
return element;
}
if(process.env.NODE_ENV !== 'production'){
console.log('我是开发环境');
let element = component();
document.body.appendChild(element);
if(module.hot){
module.hot.accept('./mach.js',function(){
console.log('mulb change:')
document.body.removeChild(element);
element = component();
document.body.appendChild(element);
})
}
}else{
console.log('我是生产环境');
document.body.appendChild(component());
}
mach.js
export function mula(x){
return x * x;
};
export function mulb(x){
return x * x * x;
};
【webpack学习笔记】a06-生产环境和开发环境配置的更多相关文章
- angular学习笔记(2)- 前端开发环境
angular1学习笔记(2)- 前端开发环境 1.代码编辑工具 2.断点调试工具 3.版本管理工具 4.代码合并和混淆工具 5.依赖管理工具 6.单元测试工具 7.集成测试工具 常见的前端开发工具 ...
- 【转】Pro Android学习笔记(二):开发环境:基础概念、连接真实设备、生命周期
在Android学习笔记(二):安装环境中已经有相应的内容.看看何为新.这是在source网站上的Android架构图,和标准图没有区别,只是这张图颜色好看多了,录之.本笔记主要讲述Android开发 ...
- Android学习笔记(三)Android开发环境的搭建
一.配置JAVA环境 二.配置Android开发环境 可以安装adt-bundle-windows,该压缩包一般自带Eclipse.或者安装Android Studio,要注意SDK的版本是否符合要求 ...
- Scrapy爬虫学习笔记 - windows \ linux下搭建开发环境2
四.虚拟环境的安装和配置 virtualenv可以搭建虚拟且独立的python运行环境, 使得单个项目的运行环境与其它项目独立起来. virtualenv本质上是个python包 虚拟环境可以将开发环 ...
- Spark学习笔记--安装SCALA和IDEA开发环境
一:安装Scala
- Android学习笔记01-Mac下搭建Java开发环境
一 安装JDK 下载 mac 下专用的jdk1.7, 下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downlo ...
- Android学习笔记(一)——安卓开发环境搭建
安装教程以及资源(2015.11.8最新版):链接:http://pan.baidu.com/s/1kTnOsMr 密码:0ogf
- Scrapy爬虫学习笔记 - windows \ linux下搭建开发环境1
一.pycharm的安装和简单使用 二.mysql和navicat的安装和使用 三.windows和linux下安装pytho ...
- (17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换
1. 概述 生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.json里面对应的就是devDependencies下面相关配置. --生产依赖: 就是 ...
随机推荐
- ubuntu学习笔记
Linux操作系统 locale –a查看支持语言 ls查看目录 ls .l / 查看根目录 apt-get –h 安装软件看帮助信息 sudo apt-get inatall packge 安装包 ...
- linux下编译时遇到fatal error: openssl/sha.h: No such file or directory怎么办?
答:安装ssl开发库 ubuntu下的安装方法为: sudo apt-get install libssl-dev -y
- win10 1803版本unable to start ssh-agent service, error :1058
PowerShell安装了pshazz或者posh-git,但是打开的时候提示 unable to start ssh-agent service, error :1058 1803的设置上面可以看到 ...
- Ubuntu下的Selenium爬虫的配置
在服务器Ubuntu系统上跑爬虫,爬虫是基于Selenium写的,遇到好几个问题,现在这里记录一下. 1. 安装环境 阿里云,Ubuntu16.04,因为没有界面,所以远程命令行操作.爬虫是基于Sel ...
- vue全局组件-父子组件传值
全局组件注册方式:Vue.component(组件名,{方法}) demo: 子组件:upload.vue <template> <div > <div class=&q ...
- Socket编程 之使用fsockopen()函数
fsockopen函数:初始化一个套接字连接到指定主机(hostname) get方式: client.php <?php //创建连接 $fp=fsockopen('localhost',80 ...
- bs4 FeatureNotFound: Couldn't find a tree builder with the features you requested: lxml. Do you need to install a parser library?
安装beautifulsoup后,运行测试报错 from urllib import requestfrom bs4 import BeautifulSoup url = "http://w ...
- UNDO(二)
Managing Undo Beginning with Release 11g, for a default installation, Oracle Database automatically ...
- springcloud采坑--Zuul上传文件报java.nio.charset.IllegalCharsetNameException: UTF-8;boundary=sqgzzmMxl1UPdIp0IAYnQgUIAr9yNewVAzKIX
报错日志: 2018-12-17 10:01:19,688 ERROR [io.undertow.request] (default task-3) UT005023: Exception handl ...
- Python自学:第三章 使用del语句删除元素
motorcycles = ["honda", "yamaha", "suzuki"] print(motorcycles) del mot ...