第一步:
1、 新建一个文件夹,
2、 点击进入该文件夹,
3、 点击搜索 输入 cmd +回车(Enter)打开命令提示符
4、进入到 当前文件夹的 CMD 指令
第二步:
1、输入 npm init -y 初始化 npm
2、文件夹会出现 packge.json
的文件夹
3、 接着安装 webpack-cli
(此工具用于在命令行中运行 webpack):
npm install webpack webpack-cli --save-dev
4、 安装完成后 文件夹会有 node_modules 和 package-lock.json
第三步:
1、将文件夹导入编程工具
2、在myWebpack2下新建一个index.html 、webpack.config.js 以及一个app目录 ,并在app目录下 新建 index.js 文件
3、在webpack.config.js 下输入
const path = require('path');//导入node内置path模块
module.exports = {
mode:"development", //设置模式 开发者模式
entry: './src/index.js', //入口文件路径
output: {
filename: 'main.js', //main 这里可以自己取名字
path: path.resolve(__dirname, 'dist'),//__dirname 项目路径 //path 出口路径
//更新一次代码 自动清理文件
clean:true
},
//需要自己添加模块配置
module:{
rules:[],
}
};
4、在 index.js 下输入
import _ from 'lodash';
function component() {
const element = document.createElement('div');
// lodash(目前通过一个 script 引入)对于执行这一行是必需的
// lodash 在当前 script 中使用 import 引入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
5、在 index.html 下输入
6、在 package.json 下 加入
"build": "webpack"
第四步:
1、 要在 index.js
中打包 lodash
依赖,我们需要在本地安装 library:
npm install --save lodash
在安装一个 package,而此 package 要打包到生产环境 bundle 中时,你应该使用 npm install --save
。如果你在安装一个用于开发环境的 package 时(例如,linter, 测试库等),你应该使用 npm install --save-dev
。
2、执行 npx webpack
,会将我们的脚本 src/index.js
作为 入口起点,也会生成 dist/main.js
作为 输出。Node 8.2/npm 5.2.0 以上版本提供的 npx
命令,可以运行在初次安装的 webpack package 中的 webpack 二进制文件(即 ./node_modules/.bin/webpack
):
npx webpack
3、运行 index.html 成功