webpack: JavaScript 应用程序的静态模块打包器
安装webpack前需要搭建node环境:
1. 安装node.js(https://nodejs.org/en/), 安装完后会自动生成 npm 包管理器
2. 测试node环境 运行命令 node -v , npm -v
然后开始安装webpack
1. 全局安装 npm install webpack -g , npm install webpack-cli -g
2. 创建项目目录
mkdir webpack-demo && cd webpack-demo
3. 初始化 npm:
npm init -y //会自动创建package.json文件
4. 搭建本地服务器
npm install webpack-dev-server --save-dev
5. 在package.json文件中编写脚本
"build" : "webpack",
"start": "webpack-dev-server --open"
6. 调整目录结构
webpack-demo下新建文件夹dist和src, dist存放打包后的文件, src是源文件
webpack-demo/dist ,
webpack-demo/index.html ,
webpack-demo/webpack.config.js
webpack-demo/src/main.js
7. 文件内容:
main.js:
document.write("str");
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>webpack demo</title> </head> <body> <div>webpack</div> <script type="text/javascript" src="bundle.js"></script> </body> </html>
webpack.config.js:
const path = require('path'); module.exports = { entry: './src/main.js', //指定入口文件 output: { filename: 'bundle.js', //项目编译后的文件名和路径 path: __dirname+ '/dist/' } };
8. 执行 npm run build 生成编译好的文件,webpack-demo/dist/bundle.js
执行 npm start 开启服务器端口,浏览器打开http://localhost:8080/调试页面,ctrl+c 关闭端口
9. 引入css文件,因为webpack只能识别js文件,所以需要安装依赖
npm install style-loader css-loader --save
创建文件 webpack-demo/src/style/a.css
在main.js中引入a.css :require("./style/a.css");
webpack.config.js文件配置:
module:{ rules: [ { test: /\.css$/, use: ['style-loader','css-loader'] } ] }
然后在a.css文件写入样式,可以正常展示