-
安装NodeJS,cnpm
NodeJS安装不消说,直接下载安装。
cnpm是npm的国内镜像,淘宝的。
npm用法不在此说明。npm install cnpm -g
-
创建项目
mkdir webpack-demo & cd webpack-demo npm init -y
此操作创建webpack-demo目录,进入并初始化一个node项目,在该目录下生成package.json文件。
第一个命令的-y选项表示快速初始化项目,不加的话要手动录入项目名、描述等信息,这些信息都会写到package.json里。 -
安装webpack
cnpm install webpack webpack-cli webpack-dev-server --save-dev
此操作在当前项目下安装webpack、webpack-cli、webpack-dev-server,存放在node_modules文件夹下,并在package.json文件中新增devDependencies信息。
-
编写业务代码
以下是来自网络的一个例子:
创建webpack-demo/dist/index.html<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'> </div> <script src="main.js"></script> </body> </html>
创建webpack-demo/src/index.js
//index.js const greeter = require('./Greeter.js'); document.querySelector("#root").appendChild(greeter());
创建webpack-demo/src/index.js
// Greeter.js module.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet; };
其中,src与dist目录名,输入文件index.js、输出文件main.js是webpack默认的名字,当然,可以配置。
在webpack-demo下使用webpack打包:webpack 或 webpack src/index.js -o dist/main.js
由于使用了默认的目录和文件名,所以使用webpack命令就可以打包,也可以手动指明输入输出文件。
这样打包的话,不管哪个命令在下面都会输出一条警告信息。大体意思是没有指定打包模式,默认使用了production模式。
打包模式有三种可选:development、production、none,分别是开发、生产、无。
development模式不对代码进行压缩,而是放在eval里。
production模式会对代码进行压缩。
none模式基本只是将文件进行连接与闭包。
指明模式,只要在命令最后加上–mode development即可webpack --mode development 或 webpack src/index.js -o dist/main.js --mode development
-
查看效果
浏览器打开dist/index.html即可看到效果 -
webpack-dev-server的使用
在package.json的scripts里新增dev与build属性:"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --inline --hot --progress --content-base ./dist", "build": "webpack --mode production --progress" }
webpack-dev-server将打包的输出放在内存中而不是文件,并且集成了express容器,将以服务器的形式提供开发调试。
inline选项为整个页面添加了"Live Reloading"功能,而hot选项开启了"Hot Module Reloading"功能,能够实现修改js代码后不需要重新打包,且不需要刷新页面就自动重载的功能。至于二者的区别,估计是inline重载的是整个页面而hot能精确到某个具体模块。我看前端一般用inline就够了。
另外,webpack本身也提供–watch选项以支持热部署,但据说项目大了响应慢。
pregress选项输出打包过程。
content-base选项指明服务的根目录。
配置完成之后,可以在webpack-demo目录下使用npm命令运行脚本:npm run dev 或 npm run build
-
webpack配置文件
webpack有一堆的东西可以配置与预处理,这里只是做个引入。
新建webpack-demo/build/webpack.dev.conf.js//webpack.dev.conf.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve('./dist'), filename: 'main.js' } }
修改package.json:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --inline --progress --content-base ./dist --config build/webpack.dev.conf.js", "build": "webpack --mode production --progress --config build/webpack.dev.conf.js" }
运行开发模式:
npm run dev
webpack-demo(4.29.6)
最新推荐文章于 2022-03-30 19:41:43 发布