新手快速上手webpack4打包工具的使用详解
37 浏览量
2020-12-10
18:29:28
上传
评论
收藏 212KB PDF 举报
新手快速上手新手快速上手webpack4打包工具的使用详解打包工具的使用详解
一直使用webpack,上次也分享过webpack配置es6~9的语法参考链接,但是对于一些小白童鞋来说,最基本的配置都不太知道,刚好利用春节休假期间对webpack4的知识点梳理一次。方
便一些刚刚入行的人学习,也是对自己的一种总结与提高
一、几个盲点的解释一、几个盲点的解释
1、全局安装与局部安装、全局安装与局部安装
对于一般的新手都有一个疑惑我是全局安装还是本项目中安装(局部安装),个人建议,现在前端发展那么快,我们使用局部安装的方式更好(使用最新的技术栈)。
我们知道javascript是弱语言,有局部变量和全局变量,其实全局安装与局部安装的性质与函数的全局变量与局部变量有点类似。
2、安装包的时候、安装包的时候–save与与-D的区别的区别
一般我们仅仅是在开发环境依赖的包直接使用-D就可以,这样就会在项目的package.json文件中的devDependencies新增相关的配置信息
npm install webpack webpack-cli -D
–save是会放在package.json文件的dependencies中
记住仅仅是开发环境需要使用的包就使用-D
二、二、webpack所谓的所谓的0配置使用配置使用
webpack是基于配置的前端脚手架,在实际项目中开发需要配置你需要的插件与加载器。
1、webpack最基本的基重要的是:
plugins:配置插件的
module:主要配置一些加载器
2、初始化项目
创建一个文件夹webpack-demo
初始化生成package.json文件
npm init --yes
3、安装webpack最基本的依赖包
npm install webpack webpack-cli -D
4、创建一个文件夹src并在里面创建一个index.js的文件
5、在命令行中运行(先忽视警告信息)
npx webpack
6、在生成的dist文件夹下会生成一个大包好的main.js文件,在该文件夹下创建一个index.html文件引入main.js,在浏览器中查看控制台是否输出信息。
二、二、webpack的配置的配置
1、在项目下创建一个webpack.config.js文件
2、可以配置的有
const path = require('path');
module.exports = {
entry: '', // 打包文件的入口
output: {}, // 打包后的出口文件配置
devServer: {}, // 开发服务器
module: {}, // 模块配置
plugins: {}, // 插件的配置
mode: 'development', // ['development', 'production']模式
resolve: {}, // 配置解析
}
三、配置开发环境三、配置开发环境(在内存中打包在内存中打包)
1、安装包
npm install webpack-dev-server -D
2、在webpack.config.js中配置入口文件与出口文件
module.exports = {
entry: './src/index.js', // 打包文件的入口
output: {
评论0