今天尝试着写一下webpack,不知道写的时候会不会把自己绕进去。如果有错误的地方还请大家指正。谢谢阅读的朋友。
认识webpack
webpack的安装
手动配置webpack
手动配置webpack内置服务
手动配置HTML模板
手动配置css
ES6语法转换
图片配置
1.1 定义:前端自动化构建工具,基于Node.js开发。
1.2 针对问题:解决引入静态资源的合并、打包、压缩、混淆等问题。
1.3 如果不使用自动化构建工具会有什么问题:
① 网页加载速度慢。
② 要处理很多包与包之间的依赖关系。
2.1 安装方式:
① 全局安装:npm install webpack -g
② 安装到项目依赖中:在项目根目录下运行 npm install webpack --save-dev
注意:webpack4,需要同时安装webpack-cli。
2.2 创建项目目录:node-modules文件夹是安装webpack时生成的,不用手动添加。需手动添加的已经用红色线条标出
安装完成后,使用npx webpack 进行打包。然后会在项目目录dist文件下生成main.js压缩文件。
2.3 代码示例:
webpack学习
console.log('这次能行')
3.1 新建配置文件:/src/webpack.config.js(注意:在这之前请先将刚才手动创建dist文件夹删掉。)
3.2 配置内容:
let path = require('path ')
module.exports = {
mode: 'development', // production or development
entry: './src/index.js', // 入口文件
output: {
filename:'main.js', // 打包之后的文件名称
path: path.join(__dirname, 'dist')
}
}
webpack学习
console.log('这次也可以打出来')
3.5 打印结果
此时页面启动的时候,还不能通过loaclhost启动。webpack有一个内置的通过express实现的开发服务。我们可以安装它,并且配置相关内容,就可以实现通过localhost来访问页面了。它的好处是,它不会真正的去打包,而是在内存中生成一个打包。
4.1 安装: npm install webpack-dev-server -D (注意:这个大写的D说明是开发时的依赖)
4.2 package.json配置:
4.3 webpack.config.js配置:
运行:npm run dev
5.1 安装:npm install html-webpack-plugin -D
5.2 webpack.config.js配置:
6.1 安装loader
npm install css-loader style-loader less-loader
6.2 webpack.config.js配置:
module: {
rules: [ // 规则
// loader执行顺序:默认从右向左,从下向上
{
test: /\.less$/,
use:[
{
loader: 'style-loader',
options:{
insertAt: 'bottom'
}
},
'css-loader',
'less-loader'
]},
]
}
新建index.css文件
body {
background-color: pink;
}
index.js引入css
require('./index.css')
6.3 执行npm run dev
webpack处理ES6语法时,需要将ES6语法(或者更高版本的)转换成ES5语法。这里要用到一JS的编译器-----Babel。
2.1 安装Babel
命令: npm install babel-loader @babel/core @babel/preset-env -D
解释一下:
① @babel/core 这个是babel的核心模块,当使用babel转换的时候,需要调用@babel/core,它可以调转换方法,从而实现换源代码。
② @babel/preset-env,这个是babel的转换模块,它可以告诉babel怎么转换,把一些高级的语法转换成低级语法。
2.2 代码示例
{ // 这里是babel-loader的配置规则
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options:{
preset: [
'@babel/preset-env'
]
}
},
]
}
2.3 执行命令 npx webpack
打包成功后,执行 npm run dev运行项目。
图片在页面中的引用方式有三种:
① 使用img标签引入。
② 在css文件中引入。
background: url('图片地址')
③ 在js中创建图片引入。
let image = new Image();
image.src = '图片地址';
document.body.appendChild(image);
3.1 命令
执行命令:npm install file-loader -D
打包命令:npx webpack
运行项目:npm run dev
3.2 代码示例:
{ // 这里是图片的规则
test: /\.(png|jpg|gif)$/,
// use: 'file-loader',
use: [
{
loader: 'file-loader',
},
'url-loader'
]
}
更新于2020.10.08.
前面一段时间,忙着处理一些私事没有更新文章,学习进度也落下不少,今天坐下来继续捋webpack,如果有理解不恰当的地方还请大家指出,非常感谢。