人生太短,要干的事太多,我要争分夺秒
在文章中,小编为大家分享了整个webpack环境的安装过程,此篇文章将会手把手教大家如何从零开始搭建一个项目
从零开始搭建一个项目
1.创建目录并且进入
mkdirzero-configcd$_
2.初始化
npminit-y
3.安装webpack和webpack-cli到开发依赖
npmiwebpack--save-dev
npmiwebpack-cli--save-dev
4.新建一个目录src,里面有是三份源码,hello.js/index.js/world.js
代码如下:
//hello
module.exports=hello;
//world
module.exports=world;
//index
consthello=require(./hello);
constworld=require(./world);
console.log(`$(hello)$(world)`);
这时候如果全局安装了webpack-cli包的话就可以使用webpack命令直接体验webpack打包效果
npmscripts
下面我们打开配置文件package.json文件,然后添加scripts字段:
scripts:{
build:webpack
}
添加完保存后,在项目目录下执行npmrunbuild,可以看到执行结果
执行成功的话,index.js文件被打包到了dist文件夹下了,同时提示我们默认使用了productionmmode,即生产环境
打开dist/main.js,里面的代码的确是被压缩的,说明是生产环境打包
下面继续修改packagejson添加scripts:
scripts:{
dev:webpack--modedeveloment,
build:webpack--modeproduction
}
这时候执行npmrundev,这次没有被压缩也没有提示了
Tips:Webpack的打包环境有production和development两种,分别对应生产环境和开发环境,生产环境默认配置包括压缩等常用配置
修改打包输出目录
通过上面的操作,我们不难发现
1.webpack默认的入口文件是src/index.js
2.webpack的默认输出目录是dist/main.js
如果希望修改输出目录就要用到命令--output
scripts:{
dev:webpack--modedevelopment--output./output/main.js,
build:webpack--modeproduction--output./output/main.js
}
这时候再执行npmrunbuild,则webpack会将打包后的文件输出到output/main.js
修改默认打包的入口文件
scripts:{
dev:webpack--modedeveloment./src/index.js,
build:webpack--modeproduction./src/index.js
}
这时候运行npmrundev就是将./src/index.js当做入口文件打包了
通过Babel来转换ES6语法
Babel是JavaScript的一个编辑器,能够将ES6+语法转换为ES5语法,保证浏览器的兼容性
Loader是Webpack中的一个重要概念,通过Loader我们可以做一些文件自身属性相关的一些操作,比如ES6语法转换
这里用到的是babel-loader,这个Loader依赖
babel/core和babel/preset-env所以首先我们需要先安装他们:
npmi
babel/corebabel-loaderbabel/preset-env--save-dev然后在项目的根目录下创建一个babel的配置文件.babelrc,内容如下:
{
presets:[
babel/preset-env]}
有了babel-loader,可以使用Webpack命令--module-bind来指定对应的文件需要经过怎样的Loader处理
scripts:{
dev:webpack--modedeveloment./src/es/index.js--module-bindjs=babel-loader,
build:webpack--modeproduction./src/es/index.js--module-bindjs=babel-loader
}
Tips:
下面介绍几个webpack-cli的小技巧:
1.内容带有进度和颜色:webpack--progress--colors
2.打印错误详情:webpack--display-error-details
3.启动监听模式:webpack--watch
4.快捷选项:-d和-p,分别代表一些常用的开发环境和生产环境的打包
webpack常用的几个选项:
1.-config指定一个Webpack配置文件的路径
2.-modue:制定打包环境的mode,取值为develoment和production,分别对应着开发环境和生产环境
3.-json:输出webpack打包的结果
4.-progress:显示Webpack打包的进度
5.-watch,-w:watch模式打包,监控文件变化之后重新开始打包
6.-color,-colors/-no-color,--no-colors:控制台输出的内容是否开启颜色
7.-hot:开启HotModuleReplacement模式
8.-profile:会详细输出每个环节的用时
上期问题答案公布:
用于制定脚本命令,供NPM直接调用,也可称作为npm脚本
请在评论区写下您的答案与网友们一起交流吧,文章中我们会公布此问题的答案.
此webpack教程参考了慕课网的相关知识并结合了自己的相关观点,特在此说明
如果您有任何技术上的问题或关于某方面技术的建议请在文章下方留言,小编看到后会第一时间与您一起交流的哦,当然了,如果觉得此文章写的好也请点赞或转发,三克油!