webpack的简单使用
我们简单的用es6语法写一些js,首先我们要清除浏览器无法直接识别es6的模块化语法,需要我们先使用babel,然后使用browerfiy. 现在我们有了webpack可以直接使用webpack处理。
既然要使用,我们就先要安装webpack,正常我们是直接在项目里面安装,这里我先全局安装了。
// 这里一定要注意webpack是4版本,webpack-cli是3版本,是因为webpack-cli是后面才推出的。
npm i -g webpack@4 webpack-cli@3
// 安装好以后直接用这行命令 -o就是输出的意思
webpack ./src/js/app.js -o ./build/js/app.js --mode=development
<!-- webpack-cli相当于明星的经纪人,不能直接跟明星对接 -->
<!-- 下面的意思是Asset是你构建的是哪个文件,chunkname是指它在打包的时候临时给app.js起了一个名字 -->
<!-- Entrypoint main = app.js 好像就是chunkname的名字又指向了app.js -->
<!-- Asset Size Chunks Chunk Names
app.js 1.13 KiB 0 [emitted] main -->
webpack配置文件的使用
/*
1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
2.该文件要符合CJS模块化规范(因为它运行在node上)
*/
// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
mode: 'development', // 工作模式
entry: './src/js/app.js', // 入口
output: { // 输出
path: path.resolve(__dirname, 'build/js'), //输出文件的路径 __dirname指的是当前文件所在文件夹的目录
filename: 'app.js' // 输出文件的名字
}
};
webpack处理css
webpack默认是不会帮我们处理css,需要我们安装插件也就是loader
module: {
rules: [
{
test: /\.css$/, // 匹配规则 该loader要处理的文件
use: [
'style-loader', // 创建style标签,将样式资源插入,添加到head中生效
'css-loader' // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
]
}
]
}
webpack引入HTML文件
之前我们只是把js,css,less文件进入了build,index.html还是我们自己引入打包后的js.现在我们看下如何把index.html也打包进去,然后自己引入js
插件和loader的区别
插件使用的时候是需要引入的,loader是不需要的。
npm i -D webpack@4 webpack-cli@3
接下来让index.html有我们的内容
/*
1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
2.该文件要符合CJS模块化规范(因为它运行在node上)
*/
// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
// 基本css loader配置
const baseCssLoader = ['style-loader', 'css-loader']
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
mode: 'development', // 工作模式
entry: './src/js/app.js', // 入口
output: { // 输出
path: path.resolve(__dirname, 'build'), //输出文件的路径 __dirname指的是当前文件所在文件夹的目录
filename: 'js/app.js' // 输出文件的名字
},
// module.rules中配置的一个一个的loader,rules一个对象就是一个loader
module: {
rules: [
// 配置解析css
{
test: /\.css$/, // 匹配规则 该loader要处理的文件
use: [
'style-loader', // 创建style标签,将样式资源插入,添加到head中生效
'css-loader' // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
]
},
// 配置解析less
{
test: /\.less$/, // 匹配规则 该loader要处理的文件
use: [
...baseCssLoader,
'less-loader'
]
}
]
},
plugins: [new HtmlWebpackPlugin(
{
template: 'src/index.html' // 模板所在的位置,不是打包以后index.html的位置
}
)]
};
webpack处理样式中的图片
/*
1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
2.该文件要符合CJS模块化规范(因为它运行在node上)
*/
// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
// 基本css loader配置
const baseCssLoader = ['style-loader', 'css-loader']
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
mode: 'development', // 工作模式
entry: './src/js/app.js', // 入口
output: { // 输出
path: path.resolve(__dirname, 'build'), //输出文件的路径 __dirname指的是当前文件所在文件夹的目录
filename: 'js/app.js' // 输出文件的名字
},
// module.rules中配置的一个一个的loader,rules一个对象就是一个loader
module: {
rules: [
// 配置解析css
{
test: /\.css$/, // 匹配规则 该loader要处理的文件
use: [
'style-loader', // 创建style标签,将样式资源插入,添加到head中生效
'css-loader' // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
]
},
// 配置解析less
{
test: /\.less$/, // 匹配规则 该loader要处理的文件
use: [
...baseCssLoader,
'less-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'imgs', // 这样写最好了
name: '[hash:6].[ext]' // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
}
}
]
}
]
},
plugins: [new HtmlWebpackPlugin(
{
template: 'src/index.html' // 模板所在的位置,不是打包以后index.html的位置
}
)]
};
我们想8kb一下的转成base64,这个时候我们就需要用file-loader的加强版url-loader
webpack处理html中引入的图片
html-loader,url-loader打架的时候报错的情况下,在url-loader里面配置下面这个
esModule:false
/*
1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
2.该文件要符合CJS模块化规范(因为它运行在node上)
*/
// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
// 基本css loader配置
const baseCssLoader = ['style-loader', 'css-loader']
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
mode: 'development', // 工作模式
entry: './src/js/app.js', // 入口
output: { // 输出
path: path.resolve(__dirname, 'build'), //输出文件的路径 __dirname指的是当前文件所在文件夹的目录
filename: 'js/app.js' // 输出文件的名字
},
// module.rules中配置的一个一个的loader,rules一个对象就是一个loader
module: {
rules: [
// 配置解析css
{
test: /\.css$/, // 匹配规则 该loader要处理的文件
use: [
'style-loader', // 创建style标签,将样式资源插入,添加到head中生效
'css-loader' // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
]
},
// 配置解析less
{
test: /\.less$/, // 匹配规则 该loader要处理的文件
use: [
...baseCssLoader,
'less-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
outputPath: 'imgs', // 这样写最好了
name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
limit: 8 * 1024,
esModule: false
}
}
]
},
{
test: /\.(html)$/,
use: ['html-loader']
}
]
},
plugins: [new HtmlWebpackPlugin(
{
template: 'src/index.html' // 模板所在的位置,不是打包以后index.html的位置
}
)]
};
webpack处理打包的其它资源
url-loader只能处理图片,file-loader可以处理任何文件
/*
1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
2.该文件要符合CJS模块化规范(因为它运行在node上)
*/
// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
// 基本css loader配置
const baseCssLoader = ['style-loader', 'css-loader']
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
mode: 'development', // 工作模式
entry: './src/js/app.js', // 入口
output: { // 输出
path: path.resolve(__dirname, 'build'), //输出文件的路径 __dirname指的是当前文件所在文件夹的目录
filename: 'js/app.js' // 输出文件的名字
},
// module.rules中配置的一个一个的loader,rules一个对象就是一个loader
module: {
rules: [
// 配置解析css
{
test: /\.css$/, // 匹配规则 该loader要处理的文件
use: [
'style-loader', // 创建style标签,将样式资源插入,添加到head中生效
'css-loader' // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
]
},
// 配置解析less
{
test: /\.less$/, // 匹配规则 该loader要处理的文件
use: [
...baseCssLoader,
'less-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
outputPath: 'imgs', // 这样写最好了
name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
limit: 8 * 1024,
esModule: false
}
}
]
},
{
exclude: /\.(html|css|less|scss|js|png|jpg|gif|bmp|json)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'media', // 这样写最好了
name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
}
}
]
},
{
test: /\.(html)$/,
use: ['html-loader']
}
]
},
plugins: [new HtmlWebpackPlugin(
{
template: 'src/index.html' // 模板所在的位置,不是打包以后index.html的位置
}
)]
};
webpack的webpack-dev-server的使用
每次我们修改以后还需要打包重启打开太麻烦了,我们想让它可以实时更新。
这里我们就需要用webpack-dev-server了
其实打包文件已经生成了,只是在内存里面生成的,没有放到硬盘里面
// 查看npm全局安装的包
npm list -g --depth 0
// 查看npm全局安装的路径
npm config get prefix
要使用 webpack-dev-server来执行
/*
1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
2.该文件要符合CJS模块化规范(因为它运行在node上)
*/
// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
// 基本css loader配置
const baseCssLoader = ['style-loader', 'css-loader']
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
mode: 'development', // 工作模式
entry: './src/js/app.js', // 入口
output: { // 输出
path: path.resolve(__dirname, 'build'), //输出文件的路径 __dirname指的是当前文件所在文件夹的目录
filename: 'js/app.js' // 输出文件的名字
},
// module.rules中配置的一个一个的loader,rules一个对象就是一个loader
module: {
rules: [
// 配置解析css
{
test: /\.css$/, // 匹配规则 该loader要处理的文件
use: [
'style-loader', // 创建style标签,将样式资源插入,添加到head中生效
'css-loader' // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
]
},
// 配置解析less
{
test: /\.less$/, // 匹配规则 该loader要处理的文件
use: [
...baseCssLoader,
'less-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
outputPath: 'imgs', // 这样写最好了
name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
limit: 8 * 1024,
esModule: false
}
}
]
},
{
exclude: /\.(html|css|less|scss|js|png|jpg|gif|bmp|json)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'media', // 这样写最好了
name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
}
}
]
},
{
test: /\.(html)$/,
use: ['html-loader']
}
]
},
plugins: [new HtmlWebpackPlugin(
{
template: 'src/index.html' // 模板所在的位置,不是打包以后index.html的位置
}
)],
devServer: {
port: 8080,
open: true, // 自动打开浏览器
hot:true
}
};
webpack处理css兼容
npm install --save-dev postcss-loader@4 postcss@8
npm i -D postcss-preset-env@6
/*
1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
2.该文件要符合CJS模块化规范(因为它运行在node上)
*/
// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 基本css loader配置
const baseCssLoader = [MiniCssExtractPlugin.loader, 'css-loader',
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env"
],
},
},
}
]
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
mode: 'production', // 工作模式
entry: './src/js/app.js', // 入口
output: { // 输出
path: path.resolve(__dirname, '../build'), //输出文件的路径 __dirname指的是当前文件所在文件夹的目录
filename: 'js/app.js', // 输出文件的名字
publicPath:'/build'
},
// module.rules中配置的一个一个的loader,rules一个对象就是一个loader
module: {
rules: [
// 配置解析css
{
test: /\.css$/, // 匹配规则 该loader要处理的文件
use: [
...baseCssLoader
]
},
// 配置解析less
{
test: /\.less$/, // 匹配规则 该loader要处理的文件
use: [
...baseCssLoader,
'less-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
outputPath: '/imgs', // 这样写最好了
publicPath: '/build/imgs',
name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
limit: 8 * 1024,
esModule: false
}
}
]
},
{
exclude: /\.(html|css|less|scss|js|png|jpg|gif|bmp|json)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'media', // 这样写最好了
publicPath: '/build/media',
name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
}
}
]
},
{
test: /\.(html)$/,
use: ['html-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin(
{
template: 'src/index.html' // 模板所在的位置,不是打包以后index.html的位置
}
),
new MiniCssExtractPlugin(
{
filename: "css/main.css"
}
)
]
};
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 10"
]
}
webpack使用babel
npm i -D babel-loader@8 @babel/core@7
npm i -D @babel/preset-env@7
/*
1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
2.该文件要符合CJS模块化规范(因为它运行在node上)
*/
// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 基本css loader配置
const baseCssLoader = [MiniCssExtractPlugin.loader, 'css-loader',
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env"
],
},
},
}
]
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
mode: 'production', // 工作模式
entry: './src/js/app.js', // 入口
output: { // 输出
path: path.resolve(__dirname, '../build'), //输出文件的路径 __dirname指的是当前文件所在文件夹的目录
filename: 'js/app.js', // 输出文件的名字
publicPath:'/build'
},
// module.rules中配置的一个一个的loader,rules一个对象就是一个loader
module: {
rules: [
// 配置解析css
{
test: /\.css$/, // 匹配规则 该loader要处理的文件
use: [
...baseCssLoader
]
},
// 配置解析less
{
test: /\.less$/, // 匹配规则 该loader要处理的文件
use: [
...baseCssLoader,
'less-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
outputPath: '/imgs', // 这样写最好了
publicPath: '/build/imgs',
name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
limit: 8 * 1024,
esModule: false
}
}
]
},
{
exclude: /\.(html|css|less|scss|js|png|jpg|gif|bmp|json)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'media', // 这样写最好了
publicPath: '/build/media',
name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
}
}
]
},
{
test: /\.(html)$/,
use: ['html-loader']
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin(
{
template: 'src/index.html' // 模板所在的位置,不是打包以后index.html的位置
}
),
new MiniCssExtractPlugin(
{
filename: "css/main.css"
}
)
]
};
wabpack也可以做自动化构建工具,webpack还可以做打包编译的功能。
webpack也有很多的插件,也可以实现热加载的功能(热加载指的就是当我们修改了代码以后会自动刷新页面)
把所有webpack的功能插件堆积起来就形成了vue-cli的脚手架
webpack就是用node写出来的
webpack的安装:
因为我们是全局安装所有后面一定要加个-g
打webpack -v会提示我们按照一个webpack-cli(不推荐使用这种方式)
出现报错自己再全局安装一下
一定要记得保存文件以后再进行编译防止没有编译到内容
相对路径前面一定要加上./,要不然容易找不到路径
entry指的是入口文件
output指的是输出文件
有时候我们还需要载入css,这个时候我们就需要使用到loader
css-loader,ts-loader指的就是css的编译模块,它会在node_modules中进行查找,test是用来检测后缀名的
构建是把代码转换成浏览器识别的代码,打包就是把多个文件打包成一个文件。
意思是把我们的文件夹初始化成一个node.js的包。
package.json是每个项目包的描述文件。
它不会合并到输出的代码里。
这里就说明了webpack可以帮我们把相关的文件转成成一个文件。
node只能执行common.js规范的代码,也就是使用require和module.export
我们平时在react中使用的import,export是浏览器识别的。
loader就是加载机的意思。(webpack默认只认识js文件),使用了加载机以后webpack在打包的时候就可以把我们写的es6的语法转成其它浏览器也兼容的格式。
只写not ie不行范围太大了。
倒着往上看,上面说错了。
帮助我们压缩css样式。
react里面默认支持less,vue默认支持scss.
开发环境并不会创建真实的物理文件。(所以本地的css文件在js里面打包构建也没事,开发环境拆分开就好了)
源代码的映射(source-map)
路由做了什么 事,它就是把我们view的单文件的组件和一个可访问的url路径进行一个关联。在我们访问它的时候,它动态的去加载组件。然后把它渲染到dom对象里面。
这样起名以后,名字一样的就会打包到一个包文件里面。
上面需要引入一下path.
https://www.bilibili.com/video/BV1GF411i7zQ?spm_id_from=333.999.0.0
参考文章:https://www.jianshu.com/p/66a6240112f9