定义
webpack基于node搭建
先安装node,最新版(不是指测试版)+ webpack最新内部可以优化打包速度
node 10.13.0 npm 6.4.1左右
安装命令
npm init <webpack project name> // 生成一个含有package.json的文件夹
npm install webpack-cli webpack -g/--save -dev // 建议使用 --save-dev
webpack -v / webpack-cli -v //查看版本号
npx webpack index.js // 选择需要打包
此时文件夹生成了一个dist文件夹,里面就是打包好的main.js
(此时呢就把打包好的js在入口文件里引入就行)
对应ES6语法(ES Moudule语法)
import Header from './common/header.js'
export dafault Header
对应CommonJS语法
var Header = require('./common/header.js')
module.exports = Header
结论: webpack是一个js代码翻译器?
真相
webpack官网: https://webpack.js.org/
正确的结论:webpack算不上一个’专业’的js打包工具,官网将其定义为是一个模块打包工具
webpack is a module bundler
webpack现在不仅可以对js模块打包工具 发展到-> css / 图片 进行打包…
webpack识别的规范:
ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句
样式(url(…))或 HTML 文件()中的图片链接
好了,啃读文档:
moudule介绍:https://webpack.docschina.org/concepts/modules/
模块方法与变量:https://webpack.docschina.org/api/module-methods/
跟着做
npm init / npm init -yes/-y (这个是直接默认配置,直接生成)
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
↓ ↓ ↓
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {},
"author": "Um",
"license": "ISC"
}
npm isatall webpack webpack-cli -g
- webpack@4.39.2
- webpack-cli@3.3.7
说一下全局安装-g的弊 => 如果之前有全局安装过webpack的话,并且之前webpack3打包过的项目,此时为4的话可能就运行不了之前打包的,所以只能卸载这个4的打包,安装回3进行运行;但是这样不是很麻烦,不能停步在以前,所以我们最好不要使用-g进行全局的安装,应该在项目中进行–save-dev开发环境的安装
先卸载掉全局的webpack wepack-cli
npm uninstall webpack webpack-cli -g
进入创建node规范的项目,输入:
npm install webpack webpack-cli --save-dev
多出了package-lock.json
和node_modules
技巧:
使用webpack -v是查不到webpack的版本号
此时可以通过npx webpack -v
可以解决查找node_module项目中安装的插件库
命令行技巧:
查看某插件库的版本信息npm info webpack
,这样就可以查看webpack这个库的历史版本信息
如何真正配置webpack(最基本)
告诉webpack如何去对项目进行打包?那怎么做?
首先一开始是没有对webpack进行配置的文件的,之前的步骤都是使用webpack默认配置去打包;
那我们新建一个配置webpack.config.js
来对webpack做基本的配置
const path = require('path')
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
}
}
参数解释:
entry:
入口文件,通俗说就是告诉webpack从哪个文件进行打包处理(从何下手),这里注意这里的入口文件位置是相对于这个webpack配置文件来的,如果从该文件出发没有知道entry中填写的要打包文件的话就会报错!
output:
输出文件,也就是配置webpack打包后的文件命名、放置位置等(何去何从)
filename:
打包文件名,配置打包好的文件叫什么名字(万事具备)
path:
打包的文件放哪(何去何从),再使用require引入path的核心模块
__dirname:
指当前根目录下,创建一个bundle的文件夹(绝对路径)
修改默认配置文件名
一般默认的配置为webpack.config.js
,但如果修改了这个名字,命令不变的话就会报错,因为他连配置的说明书都没找到,更不要谈配置了,那我们怎么让他识别这个默认名呢?
$ npx webpack --config webpackconfig.js
此时使用npx webpack就可以进行打包啦
如何简化打包命令
是否记得我们使用的vue/react中直接使用的是npm run bulid
这样的命令,那这种怎么配置呢?
↓
使用npm script,在工程目录中找到package.json
里面是不是有一个script的命令组,然后我们写成这样:
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"bundle": "webpack"
},
"author": "Um",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
}
}
此时不需要使用npx webpack进行打包啦,直接使用npm run bundle
就相当于执行了webpack打包命令了。
**问题:那么这个运行的是全局的webpack还是项目中的webpack呢?
**
当执行了package.json中的script命令时,它会先去node_module中寻找这个命令中使用的包库,如果有就会先使用这个,没有再去查找是否有全局安装,如果都没有就会报错没有该执行指令
总结一下
三种打包命令方法:
- 全局安装的webpack webpack-cli -global
webpack index.js - 项目本地进行安装webpack
npx webpck index.js - 使用npm script
npm run bundle -> webpack
回望webpack-cli
全文只字未提webpack-cli
这个是干嘛的?
这个是搭建webpack这个命令的,没有的话命令行中就不会识别webpack这个字段
补充一下打包知识点
细说一下Chunk Names 为main的原因:
module.exports = {
entry:{
"main": './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
}
}
其实我们一开始写的entry: './src/index.js'
,就是上面代码的缩写
关于报错:
大概的意思就是,webpack希望你的配置里应该明确mode模式是什么,如果不写就警告,有两种打包模式一个是production
(默认模式),另一个是developmment
module.exports = {
mode: 'production',
// mode: 'development',
entry:{
"main": './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
}
}
production
-> 生产模式,此时就是将打包的文件提交到线上的那个过程,此时代码是被压缩的
deevelopment
-> 开发模式,此时打包的文件是没有压缩的哦
结语
关于webpack的基本搭建就到这,现在的的webpack只算是萌芽阶段,后续的内容会不断帮助webpack进化,你会对webpack有一个全新的认知的,加油~
#下面三篇讲【打开loader处理的大门~】