demo__webpack
2024-08-25 09:31:56
webpack 中使用的包更新非常频繁,使用方式可能很快就会改变,解决方式
看webapck文档 和 包的使用文档
看包的源码
其他。。。
环境
win10 + webstorm 2019.1.3 + node 12.x
node 安装
往上一堆资料可以参考(比较简单)
初始化项目配置
yarn init -y //使用默认数据初始化
文件结构
│ package.json │ webpack.config.js │ yarn.lock │ ├─dist //打包后自动出现 │ app.js │ ├─node_modules //安装包后自动出现 └─src └─js app.js common.js es6.js require.js
安装 webpack
yarn add -D webpack webpack-cli //开发依赖
源文件内容
app.js
import e from './es6'; const r = require('./require'); const c = require('./common'); console.log('es6-module: ', e); console.log('require-js: ', r); console.log('common-js: ', c);
common.js
module.exports = 'this is commonjs use method';
require.js
define(function () { return 'require-js is here'; });
es6.js
export default 'this is es6 file';
package.json 项目配置
{ "name": "demo_sample_bundle", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "dev": "webpack --mode=development", "build": "webpack --mode=production" }, "devDependencies": { "webpack": "^4.33.0", "webpack-cli": "^3.3.3" } }
webconfig.config.js //打包配置
const path = require('path'); module.exports = { entry: { app: "./src/js/app.js" }, output: { filename: '[name].js', path: path.join(path.resolve(__dirname), 'dist') }, // mode: 'production' };
打包命令
npx webpack //使用打包配置 需要在项目设置script项才可以使用对应的命令 npm run dev //未压缩的代码(开发环境) npm run build //压缩后的代码(生产环境) ...(还有一些不常用的打包命令)
最新文章
- python 抽象类、抽象方法、接口、依赖注入、SOLIP
- weex append
- 1Z0-053 争议题目解析470
- LINQ to SQL语句(9)之Top/Bottom和Paging和SqlMethods
- STM32 KEIL不能输入仿真引脚端口error 65: access violation at 0x40021000 : no 'read' permission
- 【转】lonekight@xmu·ACM/ICPC 回忆录
- android152 笔记 2
- CPU,MPU,MCU,SOC,SOPC联系与差别
- EasyUI tree扩展获取实心节点
- jQuery软键盘插件
- XE10 clientDataset 访问 DataSnap 服务端报错问题,锲而不舍找方法,终于解决了
- ASP.NET 实现PDF文件下载[转]
- django中向用户发送邮件信息
- 下载fiddler证书并设置信任
- VS Code 使用笔记
- MediaPlayer: Couldn't open /storage/emulated/0/kgmusic/download/独家记忆.mp3: java.io.FileNotFoundExcept
- spring boot 2.0 源码分析(五)
- FunDA(14)- 示范:并行运算,并行数据库读取 - parallel data loading
- 安装第三方jar包的两种方式
- python 字典输出键值对