webpack入门(1)-“图解什么是webpack”传送门
初始化和安装
- 在工作目录新建一个文件夹
npm init
初始化一个文件夹,出现对话框按确定就行。npm install --global webpack
全局安装,在c盘下会生成node_modules文件夹中会包含webpack。请注意,这不是推荐的做法。全局安装会将您锁定到特定版本的webpack,并且在使用不同版本的项目中可能会失败。
官方并不推荐全局安装。npm install --save-dev webpack
安装在本地开发环境中npm install --save-dev webpack-cli
webpack4之后要安装cli。把cli安装到开发环境中。-D
就是--save-dev
的缩写
打包一个简单的文件
- 在文件夹下新建一个
src
文件,下面新建一个main.js
文件。 - 根目录下新建一个
webpack.config.js
文件。为什么要建这个文件,因为直接使用webpack
,它会寻找webpack.config.js
把它当成默认的配置去运行。此时它不需要指定任何参数,就能读取里面的内容。
// webpack.config.js
module.exports = {
entry: __dirname + '/src/main.js',//我指定了入口文件,在src/main.js
output: {
path: __dirname + '/dist', //打包后指定存放的目录,放在dist
filename: 'bundle.js' //打包后的文件叫bundle.js
}
}
__dirname是Node.js中一个全局变量,它指向当前执行脚本所在的目录。
有多个入口文件的时候:
- 如果你一开始你就不想运行默认的
webpack.config.js
,你想运行其他的配置文件,比如config.js
文件。你可以运行webpack --config config.js
,这样它就会寻找config.js
,并且运行它。 - 运行
webpack
,它会自动的寻找webpack.config.js
,找到其中的入口文件比如上面的main.js
。 - 如果你想有些个性化的需求,你想看到打包的进度,打包的模块,模块的信息,打包的原因。你可以输入以下的命令。
webpack --progress
可以看到打包的进度。webpack --progress --display-modules
可以看到打包有几个模块,模块的信息。webpack ---progress --display-modules --display-reasons
打包的原因显示出来。
- 但是这种方法太过繁琐,你要在命令行输入这么多东西。那么有没有更轻松的方法呢?有的!
- 在你初始化的时候,系统会自动生成
package.json
。现在找到根目录下的package.json
文件。
- 在里面的
scripts
下添加定义一个脚本,
"dev":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
- 最后在命令行运行
npm run dev
因为scripts脚本提供了命令的“别名”,像上面的以一个“dev”命令代替了一连串的命令,使用起来更为方便,即便你没有在命令行输入以上的配置,你依然可以看到打包的进度;以看到打包有几个模块,模块的信息;字体为彩色;打包的原因。因为你在配置文件下定义了,就不需要了。
- 在你初始化的时候,系统会自动生成
更快捷的执行打包任务
- 最原始的执行打包任务,可以使用命令
webpack main.js bundle.js
在这个例子当中,main.js
是入口文件,bundle.js
打包完之后的文件。 - 第二种,我们可以在
webpack.config.js
里写配置。
module.exports = {
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
我们只需要输入webpack
命令,webpack就能自己找到webpack.config.js
,在找出入口,找到output,执行打包。
- 第三种,继承第二种。更简单快捷的执行打包。在
package.json
里找到“scripts”脚本,添加
"start": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
然后我们只需要npm start
就可以打包了。
需要注意的是,“start”在npm中比较特殊,只需npm start 就可以执行命令。如果是非start,还要再在前面加上一个run ,比如npm run dev,npm run build
搭建开发环境
使用source maps进行调试调试
为何要使用source maps?
因为webpack
对源代码进行打包后,会对源代码进行压缩、精简、甚至变量名替换,在浏览器中,无法对代码逐行打断点进行调试,所有需要使用source maps
进行调试,它使得我们在浏览器中可以看到源代码,进而逐行打断点调试。
如何使用source maps?
在配置中添加devtool
属性,赋值为source-map
或者inline-source-map
即可,后者报错信息更加具体,会指示源代码中的具体错误位置,而source-map
选项无法指示到源代码中的具体位置。
使用开发工具
用开发工具可以简化开发过程的工作。比如你写完代码后保存开发工具可以自动帮你执行一系列的命令。
watch模式
在使用webpack-cli
进行打包时,通过命令webpack --watch
即可开启watch
模式,进入watch
模式之后,一旦依赖树中的某一个模块发生了变化,webpack
就会重新进行编译。
使用webpack-dev-server
浏览器监听你的代码的修改,并自动刷新显示修改后的结果。它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖。
- 安装。
npm install --save-dev webpack-dev-server
- 修改配置文件,添加
devServer
属性
// webpack.config.js
module.exports = {
devServer: {
contentBase: './dist',//本地服务器所加载的页面所在目录
historyApiFallback: true,//不跳转
inline: true //实时刷新
}
};
- 在
package.json
添加脚本
// package.json
{
"scripts": {
"start": "webpack-dev-server --open"
}
}
- 运行命令
npm run start
即可在本地的8080端口查看结果。 - 搭建开发环境远不止这些内容,我只挑了我在学习过程中经常用到的地方,或者我觉得重要的地方。
写在最后
webpack很难啃,我是在网上找资料看视频,一点一点摸索。网上的资料时间维度大,有的还在讲webpack1.0,有的在讲最新版的webpack,所以在整理的时候难免有出错的地方。欢迎在下方评论指出错误!