webpack安装
- webpack4.0以上的需要安装webpack-cli ,注意最好不要使用全局安装,踩了很多坑,还是没搞好,最好还是采用了局部安装,可能是我能力不太行。
npm i webpack -D
npm i webpack-cli -D - 在项目更目录下输入命 npm init -y会产生一个package.json文件,目录结构如下
- 在项目根目录中,创建名为webpack.config.js的文npm件,初始化如下基本配置:
// 这个配置文件,其实就是一个js文件,通过Node中的模块操作,向外暴露了一个配置对象
module.exports={
// 编译模式
// development转换出来的代码不会进行压缩,转换速度快
// production会进行压缩,基本上上线的时候采用production
mode:"development",
}
- 在package.json配置文件中的scripts节点下,新增dev脚本如下:
- 在终端运行npm run dev 命令,启动webpack进行打包,如果不进行上步操作,那么使用webpack命令也是可以运行的。
- 目录结构如下:
webpack的基本使用
配置打包的入口和出口
webpack的4.x版本默认约定
- 打包的入口文件为 src -> index.js
- 打包的输出文件为 dist -> mainj.js
如果要修改打包的入口和出口,可以在webpack.config.js中新增如下配置信息:
示例代码:
// 导入node.js中专门操作路径的模块
const path = require('path')
// 这个配置文件,其实就是一个js文件,通过Node中的模块操作,向外暴露了一个配置对象
module.exports={
// 编译模式
// development转换出来的代码不会进行压缩,转换速度快
// production会进行压缩,基本上上线的时候采用production
mode:"development",
// 打包入口文件的路径
// __dirname表示当前文件所处的目录,也就是项目根目录
entry:path.join(__dirname,'./src/index.js'),
output:{
// 输出文件的存放路径
path:path.join(__dirname,'./dist'),
// 输出文件的名称
filename:'bundle.js'
}
}
配置自动打包的功能
每一次我们index.js都需要问重新进行打包操作,这样的话略显麻烦。
配置自动打包
-
npm i webpack-dev-server -D 安装webpack-dev-server
-
将package.json中的dev进行修改如下
配置html-webpack-plugin生成预览页面 -
运行npm install html-webpack-plugin -D命令,安装生成预览页面的插件
-
修改webpack.config.js文件头部区域,添加如下配置信息:
// 导入预览页面的插件,得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 创建插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
// 指定要用到的模板文件
template:'./src/index.html',
// 指定生成的文件的名字,该文件存在内存中,在目录中不显示
filename:'index.html'
})
- 修改webpack.config.js文件中香味暴露的配置对象,新增如下配置节点:
- 执行npm run dev 就成功了
配置自动打包的相关参数
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
webpack中的加载器
通过loader打包非js模块
在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非.js后缀名结尾的模块,webpack默认处理不了,需要调用loader加载器才能正常打包,否则会报错。
loader加载器可以协助webpack打包处理特定的文件模块,比如:
- less-loader可以打包处理 .less 相关文件
- sass-loader可以打包处理 .scss相关文件
- url-loader可以打包处理 .css中与url路径相关文件
loader打包流程
webpack中加载器的基本使用
打包处理css文件
- 运行 npm i style-loader css-loader -D命令,安装处理css文件的loader
- 在webpack.config.js中进行配置
注意:test和user的顺序是固定的,不能颠倒,否则会报错
module.exports = {
module: {
rules: [
{
// test表示匹配的文件类型,接受正则表达式,use表示对应要调用的loader
test: /\.css$/, use: ['style-loader', 'css-loader']
}
]
}
}
- 在项目的js入口文件中(index.js)引入css
import './css/style.css'
- 重新启动项目
打包处理less文件
- 运行npm i less-loader less -D命令
- 在webpack.config.js进行配置
module: {
rules: [
{
test:/\.less$/,use:['style-loader','css-loader','less-loader']
}
]
}
- 在项目入口中引入(index.js)
import './css/style.less'
- 重新启动项目
打包处理scss
- 用命令安装sass-loader和node-sass,命令为npm i sass-loader node-sass -D
注意:用npm安装node-sass的时候可能会发生安装失败的情况,可以采用cnpm进行安装 - 在webpack.config.js中进行配置
module: {
rules: [
{
test:/\.scss$/,use:['style-loader','css-loader','sass-loader']
}
]
}
- 在项目入口文件(index.js)中进行引入
import './css/style.scss'
- 重启运行项目
配置postCSS自动添加css的兼容前缀
当我们使用css样式的时候,可能会出现ie等浏览器不兼容,所以需要为每个浏览器添加前缀,进行兼容,这样比较麻烦,因此可以使用postcss自动为css添加css的兼容前缀
- 运行 cnpm i postcss-loader autoprefixer -D命令,进行下载
- 在项目根目录中创建postcss的配置文件postcss.config.js并进行如下初始化配置:
// 导入自动添加前缀的插件
const autoprefixer = require('autoprefixer')
module.exports={
// 挂载插件
plugins:[autoprefixer]
}
- 在webpack.config.js的module,rules中修改规则如下:
打包样式表中的图片和字体文件
- 运行npm i url-loader file-loader -D命令
- 在webpack.config.js的module的rules数组中,天极爱loader规则如下:
module: {
rules: [
{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2/,use:['url-loader?limit=25000 ']
}
]
}
其中?之后的是loader的参数项
limit用来指定图片的大小,单位是字节(byte),只有小于limit大小的图片,才会被转成base64图片
- 重新启动项目
打包处理js文件中的高级语法
- 安装babel转换器相关的包:npm i babel-loader @babel/core @babel/runtime -D
- 安装babel语法插件相关的包:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
- 在项目根目录中,创建babel配置文件,并初始化基本配置如下:
module.exports={
presets: ['@babel/preset-env'],
plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
- 在webpack.config.js总添加loader规则如下:
module: {
rules: [
{
// exclude为排除项,表示label-loader不需要处理node_modules中的js文件
test:/\.js$/,use:'babel-loader',exclude:/node_modules/
}
]
}
配置vue组件的加载器
当文件中定义了vue单文件组件,想引入发现会报错无法引入,需要配置vue组件的加载器。
- 运行npm i vue-loader vue-template-compiler -D命令加载
- 在webpck.config.js配置文件中,添加vue-loader的配置项如下:
// vue组件的加载器模块引入
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module: {
rules: [
{
test:/\.vue$/,loader:'vue-loader'
}
]
}
在plugins中添加该插件
在webpack中使用vue
- 在入口文件中导入组件,并进行挂载和渲染
import Vue from 'vue'
// 导入单文件组件
import App from './css/components/App.vue'
const vm = new Vue({
el: "#app",
// 用render函数,把指定的组件渲染到el区域中
// 在webpack中都是用render来渲染组件,而不是在用componets和template来渲染
render: h => h(App)
})
- vue单文件组件
<!-- 单文件组件 -->
<template>
<div>
<h1>这是一个单文件组件</h1>
</div>
</template>
<script>
export default{
data(){
return{};
},
methods: {
}
}
</script>
<!--如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。 -->
<style scoped>
</style>
webpack 打包发布
- 在package.json中进行配置
"scripts": {
//用于打包的命令
"build":"webpack -p",
//用于开发调试的命令
"dev": "webpack-dev-server --open "
},
- 执行npm run build命令进行打包