前提：先安装好nodejs，并配置好环境变量。可以全局使用node npm 命令
1. 初始化项目
- 新建一个目录，
npm init -y初始化项目- 使用
npm install -S -D webpack webpack-cli导入webpack依赖，注意S D 要大写，-S -D是--save --dev的简写。一般命令简写的话单个横杠加命令首字母大写，全写的话两个横杠加完整命令。但也不是绝对的，不过还是有很多符合这样的特点，也不仅是npm命令。
2. 创建目录结构
完成步骤1，此时所建目录里面应该有
node_modules文件夹以及package.json文件。新建目录
dist、src。dist目录下面新建index.html，src目录下新建index.js。
index.html写入以下内容：<!doctype html> <html> <head> <title>起步</title> </head> <body> <script src="bundle.js"></script> </body> </html>
index.js写入以下内容：let h1=document.createElement('h1'); h1.innerHTML='hello webpack!' document.body.appendChild(h1);
3. 使用webpack构建项目
命令行方式：
- 输入命令：
webpack ./src/index.js -o ./dist/bundle.js。- 此时会在dist下面生成bundle.js文件，浏览器打开index.html，可以看到hello webpack。
- 命令说明：
webpack 源文件 -o 编译后生成的目标文件。对于当前项目来说，源文件就是./src/index.js，目标文件就是./dist/bundle.js。源文件是你要编辑的文件，目标文件可以自定义路径及文件名，但是要保证在./dist/index.html能正确引用。npm脚本方式启动：
在文件
package.json里面的scripts属性下面新增启动命令build。内容如下：{ "name": "webpack-demo", "version": "1.0.0", "description": "webpack demo", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", //新增‘build’启动脚本，‘build’名字可以随便起，值是原本在命令行输入的内容。 //--mode development 是启动模式，表明是开发模式。如果不写，会有一个警告 "build":"webpack ./src/index.js -o ./dist/bundle.js --mode development" }, "author": "kagari", "license": "ISC", "devDependencies": { "webpack": "^4.19.1", "webpack-cli": "^3.1.0" } }命令行输入命令
npm run build即可。效果跟第一种方式一样。配置文件方式启动：
在项目根目录下新建
webpack.config.js文件，内容如下：const path = require('path'); module.exports={ entry:'./src/index.js', //源文件 output:{ filename:'bundle.js', //编译后的文件名 path:path.resolve(__dirname,'dist'), //编译后要存放的文件路径 } }命令行输入
webpack --config webpack.config.js即可。也可以将配置文件的启动方式也写入npm脚本，步骤跟方式2一样，自己试试吧！
4. 到此为止的目录结构如下：
webpack-demo: dist: bundle.js index.html node_mosules: src: index.js package.json webpack.config.js
网友评论