世界上最伟大的投资就是投资自己的教育
在命令行中运行 webpack
命令确实可以实现 webpack
的功能,但是我们一般不这么做,我们要用配置文件来处理。
我们把之前学到的知识用 webpack
的配置文件来实现,配置文件的名字叫 webpack.config.js
位于项目根目录下。
1. 创建配置文件 webpack.config.js
它的内容如下:
module.exports = {
entry: './src/app.js',
output: {
filename: './dist/app.bundle.js'
}
};
简单解释一下: entry
表示源文件,output
这边表示的是输出的目标文件。
很简单吧!
那怎么用呢?
直接在终端上输入 webpack
就可以了。webpack
命令会去找 webpack.config.js
文件,并读取它的内容(源文件和目标文件),最后进行相应的处理。
如下所示:
当然,webpack.config.js
的内容不止这么简单,可以更复杂些,我们以后再来介绍。
2. 改造 package.json 的 scripts 部分
还记得上次说过的 package.json
这个文件吗?它主要放了一些项目的介绍信息,除此之外,它还要一个重要的功能。
就是可以放一些常用的命令行脚本,比如我们可以把我们经常要用的 webpack
命令放到这里来。
我把它改了一下,变成类似下面这样:
{
"name": "hello-wepback",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack -d --watch",
"prod": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.8.1"
}
}
改动的内容主要是增加了下面几行:
"scripts": {
"dev": "webpack -d --watch",
"prod": "webpack -p"
},
怎么用呢?
很简单,分别是
$ npm run dev
和
$ npm run prod
你会发现 npm run dev
和 webpack -d --watch
的效果是一样的。
-d
这个参数之前没介绍过,它的意思就是说包含 source maps,这个有什么用呢,就是让你在用浏览器调试的时候,可以很方便地定位到源文件,知道这个意思就好了,不用深究太多。
你会想,为什么要用 package.json
的 scripts
功能呢?
我觉得主要有两个原因吧:
第一:简单维护,所有的命令都放一起了,也能方便地查看
第二:别人下载了你的源码,一查看 package.json
就能知道怎么运行这个项目。
先说这么多。
03:521FreeWebpack 3 零基础入门视频教程 #1 - 介绍
03:382FreeWebpack 3 零基础入门视频教程 #2 - 安装
07:373FreeWebpack 3 零基础入门视频教程 #3 - 实现 hello world
03:41FreeWebpack 3 零基础入门视频教程 #4 - Webpack 的配置文件 Webpack.config.js
11:095FreeWebpack 3 零基础入门视频教程 #5 - 使用第一个 Webpack 插件 html-Webpack-plugin
12:516FreeWebpack 3 零基础入门视频教程 #6 - 使用 loader 处理 CSS 和 Sass
06:247FreeWebpack 3 零基础入门视频教程 #7 - 初识 Webpack-dev-server
05:098FreeWebpack 3 零基础入门视频教程 #8 - 用 Webpack 和 babel 配置 React 开发环境
05:079FreeWebpack 3 零基础入门视频教程 #9 - 用 clean-Webpack-plugin 来清除文件
06:3810FreeWebpack 3 零基础入门视频教程 #10 - 配置多个 HTML 文件
04:0911FreeWebpack 3 零基础入门视频教程 #11 - 如何使用 pug (jade) 作为 HTML 的模板
07:5312FreeWebpack 3 零基础入门视频教程 #12 - 如何使用模块热替换 HMR 来处理 CSS
06:3313FreeWebpack 3 零基础入门视频教程 #13 - 生产环境 vs 开发环境
10:2114FreeWebpack 3 零基础入门视频教程 #14 - 如何打包图片
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号
在哪里下载视频呢
视频右下方有个按钮可以点击下载