1、全局安装webpack（需先安装了node.js）
|
1 |
npm install webpack -g |
2、在任意文件夹新建一个项目文件夹，名字随意，如testwebpack，然后在里面新建三个文件，
index.html
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="index.js"></script> </body> </html> |
main.js
|
1 |
document.write("<h1>Hello World 111</h1>"); |
webpack.config.js
|
1 2 3 4 5 6 7 |
module.exports = { entry: "./main.js", output: { filename: 'index.js' } }; 这样配置的意思是把我们自己写的main.js文件编译成index.js文件 |
好了，准备工作到此结束。
3、webpack使用
打开我们的命令终端，切换到我们的项目目录，就是刚才创建的文件夹，我假设为F:\0mytest\kj\webpack>
然后，我们执行npm install安装依赖，
等依赖安装完成，再执行命令webpack，对我们的项目进行编译。等该命令执行完成，我们的main.js就已经生成了一个index.js的文件，用浏览器打开index.html，便可看到效果。
4、把我们的项目跑起来
全局安装live–server
|
1 |
npm install live-server -g |
安装成功后，就在我们刚才的项目路径，执行命令live-server，执行成功后会输出如下信息
|
1 |
Serving "F:\0mytest\kj\webpack" at http://127.0.0.1:8080 |
此时，我们只要访问http://127.0.0.1:8080，就可以看到index.html页面的内容，搞定。
题外话：–save-dev和–save的区别，以及我们什么时候用–save-dev，什么时候用–save。
简单的说--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。
比如，你使用了vue来开发项目，在开发过程中你使用了css-loader和style-loader，当你的项目发布后（也可以说打包好了过后），vue.js肯定还是需要的，但css-loader和style-loader已经用不到了，因为它们只是我们在开发阶段的一些辅助工具。所以vue.js就用–save，css-loader和style-loader就用–save-dev。同时，使用了–save的模块，会被放到package.json的dependencies对象下，而使用了–save-dev的模块，会被放到package.json的devDependencies对象下。对于开发阶段和上线过后都需要使用的，用–save就行。
发表评论