Webpack4 学习笔记一初探Webpack
前言
此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出
Webpack
- 打包文件
- 支持JS模块化
- 模式: production(0配置默认), development(生产环境)
更详细的请前往 webpack官网
安装
- npm i webpack webpack-cli -D
执行 webpack
- npx webpack
- 注意: 在有package.json的目录下执行命令, 当前目录一定要有src文件夹
手动配置webpack
module.exports = {
mode: 'development', // 生产环境
entry: './src/index.js', // 入口文件
output: {
filename: ' bundle.js',
path: path.resolve(__dirname, 'dist'), // 目标输出路径, path的绝对路径
}
}
mode: 告诉 webpack 使用响应模式的内置优化
- 使用development
module.exports = {
+ mode: 'development'
- plugins: [
- new webpack.NamedModulesPlugin(),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}
webpack在生产环境下默认使用的插件。
- production
module.exports = {
+ mode: 'production',
- plugins: [
- new UglifyJsPlugin(/* ... */),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
- new webpack.optimize.ModuleConcatenationPlugin(),
- new webpack.NoEmitOnErrorsPlugin()
- ]
}
在生产环境下会对代码进行代码压缩等优化, 默认使用这些插件
## package.json中配置 webpack 快捷脚本
javascript "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js" },
在脚本 scripts对象中新增了 build命令, 指定webpack --config, 通过--config选项来指定配置文件。
当执行 npm run build时, 会自动启用 webpack,并且找到 webpack.config.js配置文件并执行。
## plugins插件
- webpack-dev-server
为webpack应用程序提供开发服务器,它只适用于开发。在scripts中可以配置"dev": "webpack-dev-server""
运行使用 npm run dev
笔记地址
Webpack4 学习笔记一初探Webpack的更多相关文章
- Webpack4 学习笔记五 图片解析、输出的文件划分目录
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack打包图片和划分文件路径 使用图片的方式 通过 new Image() 在 css中设置 background-imag ...
- Webpack4 学习笔记四 暴露全局变量、externals
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...
- Webpack4 学习笔记三 ES6+语法降级为ES5
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...
- Webpack4 学习笔记二 CSS模块转换
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...
- webpack4学习笔记(二)
webpack打包各种javascript文件 (本文只是提供一个学习记录,大部分内容来自网络) 一,打包js文件和es6代码 1,webpack命令打包js文件 Tip: 在webpack4.x之前 ...
- webpack4学习笔记(一)
webpack4 1,安装webpack npm insatll webpack --save-dev //安装最新版本 npm insatll webpack@<version> --s ...
- Webpack4 学习笔记八 开发环境和生产环境配置
webpack resolve属性 webpack 区分开发环境和生产环境 webpack resolve属性 该选项的作用是设置模块如何被解析. resolve.alias: 设置别名, 在vue中 ...
- Webpack4 学习笔记七 跨域服务代理
webpack 小插件使用 webpack 监听文件变化配置 webpack 处理跨域问题 Webpack 小插件使用 clean-webpack-plugin: 用于在生成之前删除生成文件夹的Web ...
- Webpack4 学习笔记六 多页面配置和devtool
webpack 多页配置 webpack可以配置单页应用, 也可以配置多页应用. 区别在于, 单页应用entry入口只有一个, 而多页应用入口有多个 webpack配置: const path = r ...
随机推荐
- 性能测试工具Jmeter05-badboy检查点与参数化
检查点设置 选择要检查的文字,然后在Tools->Add Assertion for Selection里添加断言,在进行回放 参数化 在请求搜索关机键字的部分进行参数化 选中搜索关键字- ...
- (转)企业级NFS网络文件共享服务
企业级NFS网络文件共享服务 原文:http://www.cnblogs.com/chensiqiqi/archive/2017/03/10/6530859.html --本教学笔记是本人学习和工作生 ...
- Oozie安装部署
不多说,直接上干货! 首先,大家先去看我这篇博客.对于Oozie的安装有一个全新的认识. Oozie安装的说明 我这里呢,本篇博文定位于手动来安装Oozie,同时避免Apache版本的繁琐编译安装,直 ...
- Andrew Ng 的 Machine Learning 课程学习 (week2) Linear Regression
这学期一直在跟进 Coursera上的 Machina Learning 公开课, 老师Andrew Ng是coursera的创始人之一,Machine Learning方面的大牛.这门课程对想要了解 ...
- 读取和写入Cookies
#region 读取或写入cookie 2 /// <summary> 3 /// 写cookie值 4 /// </summary> 5 /// <param name ...
- JAVA避免入坑必备
1.关于@Override Annocation 对于子类(包括并且特别是匿名类)中,重写父类的函数,一定要加上@Override.这会帮助你避免很多不必要的看起来让人恼怒的错误.比如,为什么子类重写 ...
- mysql存储过程中最后有commit和没有commit 是有所不同的。(为测试但是碰到过这个问题)
如果存储过程中没有执行commit,那么spring容器一旦发生了事务回滚,存储过程执行的操作也会回滚.如果存储过程执行了commit,那么数据库自身的事务此时已提交,这时即使在spring容器中托管 ...
- Windows环境下搭建Linux虚拟机
下载VMware workstation 和 CentOs 或者 redHat .Ubuntu
- Cocos2d-x v3.1项目创建(三)
Cocos2d-x v3.1项目创建(三) Cocos2d-x官方为我们提供了用于创建.编译.运行和部署的一套命令行的工具集,也就是上篇文章中我们所提到的Cocos2d-Console,它位于我们的引 ...
- SQL Server 2008R2 18456错误解决方案
SQL Server 2008R2 18456错误解决方案 微软解释说,因密码或用户名错误而使身份验证失败并导致连接尝试被拒时,类似下面的消息将返回到客户端:“用户 '<user_name> ...