Webpack笔记一
1.webpack简介
Webpack是一种前端资源构建工具,一个静态模块打包器(module bundler)
在Webpack看来,前端的所有资源文件(js/json/css/less/img...)都会作为模块处理
它将根据模块间的依赖关系进行静态分析,打包生成对应的静态资源(bundle)
2.Webpack五个核心概念
1.Entry 入口
-Entry指示Webpack以哪个文件为入口起点开始打包,分析构建内部依赖图
2.Output 输出
-Output指示Webpack将打包后的静态资源bundles输出到哪里,以及如何命名
3.Loader
-Loader让Webpack去处理那些非Javascript文件(Webpack能理解的JavaScript)
4.Plugins 插件
-Plugins可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等
5.Mode 模式
-Mode 指示webapck使用相应模式的设置,分两种:development/production
3.Webpack初体验
打开终端,输入指令:
1. npm init
回车，设置package name为webpack_test，回车
全局安装
2. npm i webpack webpack-cli -g
本地安装
3. npm i webpack webpack-cli -D
1.在02.webpack初体验文件夹下新建文件夹src与build
在src下新建文件index.js做为入口文件
1.运行指令
开发环境:webpack ./src/index.js -o ./build/built.js --mode=development
含义: webpack会以 ./src/index.js为入口文件开始打包,打包后输出到./build.built.js,整体的打包环境是开发环境
运行环境:webpack ./src/index.js -o ./build/built.js --mode=production
含义: webpack会以 ./src/index.js为入口文件开始打包,打包后输出到./build.built.js,整体的打包环境是生产环境
2.结论:
1.webpack能处理js/json资源,不能处理css/img等其他资源
2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
3.生产环境比开发环境多一个压缩js代码
function add(a,b){
return a+b;
}
console.log(add(2,3));
如果出现无法加载文件，此系统禁止运行脚本的情况
电脑搜索框->输入windows Powershell ->右键以管理员的身份运行
//设置权限
set-ExecutionPolicy RemoteSigned
输入 Y 确定回车
//查询当前状态
get-ExecutionPolicy
出现RemoteSigned即可
4.打包样式资源
// webpack.config.js webpack的配置文件
// 作用:指示webpack干哪些活(当运行webpack指令时,会加载里面的配置)
// 所有的构建工具都是基于node.js平台运行的,模块化的话默认采用commonjs
// resolve用来拼接绝对路径的方法
const {
resolve } = require('path');
module.exports = {
// webpack配置
// 1.入口起点
entry: './src/index.js',
// 2.输出
ouput: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname 属于nodejs变量,代表当前文件目录的绝对路径
path: resolve(__dirname, 'build')
},
// 3.loader的配置
module: {
rules: [{
// 详细的loader配置
// 不同文件必须配置不同的loader处理
//1. 匹配哪些文件
test: /.\css$/,
// 2.使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上 依次执行
// 将css文件变成commonjs模块加载到js中,里面的内容是样式字符串
'css-loader',
// 创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader'
]
},
{
// 不同文件必须配置不同的loader处理
//1. 匹配哪些文件
test: /.\less$/,
// 2.使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上 依次执行
'css-loader',
'style-loader',
// 将less文件编译成css文件,需要下载less-loader与less
'less-loader'
]
}]
},
// 4.plugins配置
plugins: {
// 详细的plugins配置
},
// 5.mode模式
mode: 'development',
// mode:'production',
}
5.打包Html资源
/**
* 1.loader 下载 使用(配置loader)
* 2.plugins 下载 引入 使用
*/
const {
resolve}=require('path');
const HtmlWebPackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/index.js',
ouput:{
filename:'built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
{
test:/.\less$/,
use:['less-loader','css-loader','style-loader']
}
]
},
plugins:[
// plugins的配置
// html-webpack-plugin
// 功能：会默认创建一个空的html,自动引入打包输出所有的资源(js/css)
new HtmlWebPackPlugin({
template:'./src/index.html'
})
],
mode:'development'
}
6.打包图片资源
/**
* 1.loader 下载 使用(配置loader)
* 2.plugins 下载 引入 使用
*/
const {
resolve}=require('path');
const HtmlWebPackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/index.js',
ouput:{
filename:'built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
{
test:/.\less$/,
use:['less-loader','css-loader','style-loader']
},
// 处理图片资源
{
test:/\.(jpg|png|gif)$/,
// 使用一个loader
// 下载url-loader file-loader
loader:'url-loader',
options:{
// 如果图片大小小于8kb,就会被base64处理
/**
* 优点:减少请求数量
* 缺点: 图片体积会更大
*/
limit:8*1024,
/**
* 问题:因为url-loader默认使用ES6模块化解析,而html-loader引入图片是commonjs
* 解析时会出现问题[Object Module]
* 解决方法:关闭url-loader的ES6模块化,使用commonjs解析
*
*/
esModule:false,
/**
* 给图片进行重命名
* [hash:10] 取图片的hash值的前10位
* [ext] 取原来文件的扩展名
*/
name:'[hash:10].[ext]'
}
},
{
test:/\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader处理)
loader:'url-loader'
}
]
},
plugins:[
// plugins的配置
// html-webpack-plugin
// 功能：会默认创建一个空的html,自动引入打包输出所有的资源(js/css)
new HtmlWebPackPlugin({
template:'./src/index.html'
})
],
mode:'development'
}
7.打包其他资源
/**
* 1.loader 下载 使用(配置loader)
* 2.plugins 下载 引入 使用
*/
const {
resolve}=require('path');
const HtmlWebPackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/index.js',
ouput:{
filename:'built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
{
test:/.\less$/,
use:['less-loader','css-loader','style-loader']
},
// 处理图片资源
{
test:/\.(jpg|png|gif)$/,
// 使用一个loader
// 下载url-loader file-loader
loader:'url-loader',
options:{
// 如果图片大小小于8kb,就会被base64处理
/**
* 优点:减少请求数量
* 缺点: 图片体积会更大
*/
limit:8*1024,
/**
* 问题:因为url-loader默认使用ES6模块化解析,而html-loader引入图片是commonjs
* 解析时会出现问题[Object Module]
* 解决方法:关闭url-loader的ES6模块化,使用commonjs解析
*
*/
esModule:false,
/**
* 给图片进行重命名
* [hash:10] 取图片的hash值的前10位
* [ext] 取原来文件的扩展名
*/
name:'[hash:10].[ext]'
}
},
{
test:/\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader处理)
loader:'url-loader'
}
]
},
plugins:[
// plugins的配置
// html-webpack-plugin
// 功能：会默认创建一个空的html,自动引入打包输出所有的资源(js/css)
new HtmlWebPackPlugin({
template:'./src/index.html'
})
],
mode:'development'
}
8.Webpack开发环境配置
开发环境配置:能让代码运行
运行项目指令:
webpack 会将打包结果输出出去
npx webpack-dev-server 只会在内存中编译打包,不会输出出去
const {
resolve } = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
ouput: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// laoder的配置
// 1.处理less资源
{
test: /.\less$/,
use: ['less-loader', 'css-loader', 'style-loader']
},
// 2.处理图片资源
{
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载url-loader file-loader
loader: 'url-loader',
options: {
limit: 8 * 1024,
// 关闭es6模块化
esModule: false,
name: '[hash:10].[ext]'
}
},
// 3.处理css资源
{
test: /.\css$/,
use: ['css-loader', 'style-loader']
},
// 4.处理html的img资源
{
test: /\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader处理)
loader: 'html-loader'
},
/**
* 5.处理其他资源
*/
{
exclude: /\.(css|js|html|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
// plugins的配置
// html-webpack-plugin
// 功能：会默认创建一个空的html,自动引入打包输出所有的资源(js/css)
new HtmlWebPackPlugin({
template: './src/index.html'
})
],
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 52330,
open: true
},
mode: 'development'
}