1. 选择一个文件夹: D:/usr/webpack/demo01,并且在该目录下创建一个package.json 空白文件
demo
|- package.json
2. 打开vscode:
3. 进入终端执行:
npm init
4. 在当前文件夹下创建文件目录:
demo
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
5. 安装webpack
npm install webpack -g //如果已经全局安装过,忽略此条命令
npm install webpack --save-dev
npm install webpack-cli --save-dev
6. 创建一个webpack.config.json 文件
//提供目录
const path = require('path');
//
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
7. 配置 package.json 文件,设置webpack的npm 启动方式; 配置 :"build":"webpack"
{
"name": "demo01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
},
"author": "Jon",
"license": "ISC",
"devDependencies": {
"lodash": "^4.17.11",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1"
},
}
8. 配置服务启动方式:
npm install --save-dev webpack-dev-server
9. 在 package.json中加入:
"start": "webpack-dev-server --open"
10. 在webpack.json中加入
//提供目录
const path = require('path');
//
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'
}
};
11. 打包运行
npm start //运行
npm run build //打包
12. 最终配置:
/* package.json */
{
"name": "demo01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
"author": "Jon",
"license": "ISC",
"devDependencies": {
"lodash": "^4.17.11",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
// webpack.config.json
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'
}
};