一.如何创建一个案例项目文件
案例如图
二.说明
dist:是发布的文件夹 (webpack执行时的目标文件)
src:开发时的文件夹
main.js 入口文件,这里一般是导入文件
index.html: 展示文件,会引用通过webpack打包生成的bundle.js
pageage.json 包管理配置文件
webpack.config.js 打包配置文件
三.实现步骤:
第一步:创建文件和文件夹
1/创建dist
2/src文件夹
3/main.js,mathUtils.js
4/index.html
5/webpack.config.js
查看文件内容
mathUtils.js文件
function sum(num1, num2) { return num1 + num2; } function mul(num1, num2) { return num1 * num2; } export { sum, mul };
main.js
import { sum, mul } from "./mathUtils";
console.log(sum(10, 20));
console.log(mul(10, 20));
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script src="./dist/bundle.js"></script> </body> </html>
疑问:这个bundle.js是怎么来的?请看下面内容
webpack.config.js
const path = require("path"); module.exports = { entry: "./src/main.js", output: { path: __dirname + "/dist", filename: "bundle.js", } }
注:若没有这个文件,则可以在执行 "第二步:配置环境并执行命令"后,执行下面命令
webpack ./src/main.js ./dist/bundle.js
当然,正常是需要配置的,因为这样可以将后面的语句放在webpack.config.js文件中,之后只需要执行
webpack
第二步: 配置环境并执行命令
配置webpack环境
npm i webpack@3.6.0 -g //配置全局的webpack环境,请注意这里的版本,3.6.0是为了对应脚手架2.0的 webpack -v //可以查看版本
执行命令
webpack
之后,就会在dist中生成相关的文件了,然后index.html中就需要引用bundle.js文件
第三步骤:配置package.json文件,简化执行命令,方便操作
npm init -y //这个语句可以生成package.json
注意:所有的文件夹和文件名的命名都不能是中文和特殊符号,不然会报错
查看文件内容
package.json
{ "name": "k04", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { //脚本配置,这里可以简化命令 "test": "echo "Error: no test specified" && exit 1",
"build" :"webpack"
}, "keywords": [], "author": "", "license": "ISC", "dependencies": { //开发环境的依赖 "webpack": "^3.6.0" }, }
执行命令
npm run build
注意:因为是开发环境的依赖,那么项目发布的时候,也是需要这个package.json文件的,那么就需要再执行一下配置局部环境
npm i webpack@3.6.0 -S --save-dev
第四步:如何打包css文件
(一) 创建文件和文件夹
1/css文件夹
2/normal.css文件
(二) 查看文件内容,添加配置内容
normal.css
body {
background: yellow;
}
在main.js中,将css文件作为模块导入 (按照ES6的module规范来的,还可以是node的Common.js)
import { sum, mul } from "./mathUtils";
console.log(sum(10, 20));
console.log(mul(10, 20));
import "./css/normal.css"; //这里添加了一个导入模块
注意:webpack实际上是没有能力对css等文件进行打包的,所以需要通过他扩展的内容 loader来进行处理
(三) 执行命令,安装所需要的loader,同时配置webpack.config.js文件
npm install css-loader style-loader --save-dev
说明:css-loader 只负责将css文件进行加载
style-loader 只负责将样式添加到DOM中
注意:这里会有一个问题,执行该命令后,会出现版本问题,导致后面的npm run build时报错,因为版本问题,所有下面的内容是修改后的,那么在修改后再次执行 npm i 就可以解决
执行命令后,pageage.json文件内容会发生变化
{ "name": "k04", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { //开发时依赖 "webpack": "^3.6.0" }, "devDependencies": { // 进行时依赖 "css-loader": "^3.3.0", //这里的版本是修改后的 "style-loader": "^1.0.0" //这里的版本是修改后的
} }
配置webpack.config.js文件
const path = require("path"); module.exports = { entry: "./src/main.js", output: { path: __dirname + "/dist", filename: "bundle.js", }, module: { rules: [ { test: /.css$/, use: ["style-loader", "css-loader"], }, ], }, };
思考内容:为什么是先 style-loader 然后 css-loader
说明:css-loader 只负责将css文件进行加载
style-loader 只负责将样式添加到DOM中
答案:因为在使用多个loader时,webpack是从右到左的
(5) 执行命令,打开index.html运行起来
npm run build
alt+b 运行 index.html
页面变成黄色