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 //压缩后的代码(生产环境)
...(还有一些不常用的打包命令)
转载于:https://www.cnblogs.com/heidekeyi/p/10989560.html