webpack入门 webpack

一、安装 cnpm install webpack

文章图片

二、webpack初始化 npm init -y
出现package.json文件

文章图片

三、 webpack命令行 npm i -D webpack-cli
四、打包 npx(直接定位到node_modules/bin) webpack
npx webpack --mode development(开发模式打包)
npx webpack --mode production(生产模式打包)
五、示例 【webpack入门】路径： src/clg.js

export default function clg(msg){ console.log(msg); }

路径：src/index.js

import clg from './clg.js' clg('webpack init')

执行打包命令：

npx webpack --mode development

结果：在dist文件夹下出现main.js

文章图片

路径：index.html，引入main.js

webpackdemo - 锐客网 hello

结果：

文章图片

六、package.json里命令行配置

文章图片

七、webpack.config.js,npx webpack默认执行的就是webpack.config.js文件，如果是需要执行其他名称的文件，需注明

const path = require('path'); module.exports={ //当前环境开发环境:development ,生产环境 production "mode": 'development', //目标文件 "entry":[path.resolve(__dirname,'./src/index.js')], //可以配置多个入口文件 //输出文件 "output":{ path: path.resolve(__dirname,'./dist'), filename: 'app.js' }, //插件 "plugins":[], //模块规则 "module":{}}