webpack使用

什么是webpack? 一个基于Node的前端构建工具,可以实现对项目的打包(构建),主要解决文件(模块)之间的依赖,高级代码的转译,文件(模块)的合并和压缩等问题。

// 1.安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

// 2. 使用cnpm安装webpack/webpack-cli
cnpm i webpack webpack-cli -g

// 3. 检查版本号
webpack -v

// 1. 使用cnpm安装yarn
cnpm i yarn -g

// 2. 安装全局包webpack/webpack-cli
yarn global add webpack webpack-cli

/*
	将yarn安装包的路径配置到环境变量
	将这个路径拷贝C:\Users\LEO\AppData\Local\Yarn\bin添加到环境变量的path中
	
	1. 按win+r输入sysdm.cpl
	2. 选择高级-环境变量
	3. 将yarn的bin目录添加到系统变量的path中
*/

// 3. 检查版本号
webpack -v

webpack的基本使用

// 1. 新建文件夹，在文件夹中初始化package.json文件
yarn init -y

// 2. 在项目文件夹中新建src、dist子文件夹、webpack.config.js文件

// 3. 进入到src目录,新建index.html文件、index.js文件

// 4. 在webpack.config.js中写入以下内容
module.exports = {
    mode:'development',
    entry: path.join(__dirname, './src/main.js') // 打包的入口文件
    output; { // 输出的文件配置
    	path: path.join(__dirname, './dist'), // 指定打包好的文件路径
    	filname: 'bundle.js' // 指定输出文件的名称
    }
}

// 5. 在index.js中书写代码,通过执行webpack这个命令进行编译,会输出到dist下的main.js里面
// index.html 中引入main.js
// 编译命令:webpack(必须保证在当前项目根目录下面)

webpack-dev-server的使用

webpack-dev-server可以开启一个基于express的服务器

webpack-dev-server可以将当前项目进行托管,托管的根目录就是项目的根目。托管之后可以监听每个文件的变化,当文件发生变化,会自动执行打包编译的命令。

// 1. 在项目中安装webpack-dev-server webpack webpack-cli
yarn add webpack-dev-server webapck webpack-cli --dev或者cnpm i webpack-dev-server webpack webpack-cli -D  
// 注意的是 webpack-dev-server依赖于webpack 和 webpack-cli

// 2. 在package.json文件中书写以下配置
"scripts": {
	"dev":"webpack-dev-server --open --port 8888 --hot --inline --contentBase src"
}
// open 自动打开浏览器
// port 指定端口号
// hot 热重载
// inline 自动刷新浏览器
// contentBase 指定静态资源托管目录


// 3. 在项目根目录运行npm相关命令执行打包
npm run dev

注意:需要修改index.html文件中js文件的导入
<script src="/main.js"></script>

html-webpack-plugin

1. 根据指定的模板文件生成一个内存中的html文件
2. 在生成好的html文件里面自动引入打包好的main.js文件

// 1. 安装html-webpack-plugin
yarn add html-webpack-plugin --dev

// 2. 在webpack.config.js中书写插件配置
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode:'development',
  plugins:[
    new HtmlWebpackPlugin({
      // 模板文件
      template:path.join(__dirname,'./src/index.html'),
      // 生成在内存中的文件名称,一般都必须写index.html
      filename:'index.html'
    })
  ]
}

注意: 使用html-webpack-plugin这个插件之后,需要删除调用模板index.html里面的js文件导入

style-loader&css-loader的使用

解析后缀为.css的文件,将css样式以内联样式的方式插入到html页面中

// 1. 安装style-loader css-loader
yarn add style-loader css-loader --dev

// 2. 在webpack.config.js中书写加载器配置
module.exports = {
    module:{// 这个节点用于配置所有第三方模块
        rules:[ // 第三方模块匹配规则 每一个模块都是一个配置对象

        	// 配置处理 .css 文件的第三方loader规则   test 用正则匹配需要处理的 .css 文件 use 调用第三方loader进行处理
            {test:/\.css$/, use:['style-loader','css-loader']}
        ]
    }
}

less-loader的使用

解析后缀为.less文件

// 1. 安装解析less文件的加载器
yarn add less-loader less --dev

// 2. 在webpack.config.js中书写加载器配置
rules:[
        {
            test:/\.less$/,
            use:['style-loader','css-loader','less-loader']
        }
]

sass-loader的使用

解析后缀为.scss的文件

// 1. 安装解析less文件的加载器
yarn add sass-loader node-sass --dev

// 如果node-sass下载不了,使用cnpm尝试下载 cnpm i node-sass -D

// 2. 在webpack.config.js中书写加载器配置
rules:[
        {
            test:/\.scss$/,
            use:['style-loader','css-loader','sass-loader']
        }
]

url-loader的使用

解析图片、字体图标、音视频等静态文件

// 1. 安装解析文件的加载器
yarn add url-loader file-loader --dev

// 2. 在webpack.config.js中书写配置规则
rules:[
      // 解析图片
        {
            test:/\.(jpg|png|gif|bmp|jpeg)$/,
            use:'url-loader?limit=5000&name=[hash:8]-[name].[ext]'
        },
      // 解析字体图标
        {
      test:/\.(ttf|eot|woff|woff2|svg)$/,
            use:'url-loader?limit=2048&name=[hash:8]-[name].[ext]'
        }
]

// 如果资源被打包成路径 内部使用的是url-loader
// 如果资源被打包成base64字符串 内部会使用file-loader

// limit单位是字节 1kb = 1024字节
// 被打包的图片小于limit值,会被转换成base64字符串内嵌到main.js中
// 被打包的图片大于等于limit值,会被打包成一个路径,在访问图片时会单独发送一个请求获取

babel-loader的使用

解析高级JS语法

// 1. 安装相关的包-直接装以下包
yarn add babel-loader --dev
yarn add @babel/core --dev
yarn add @babel/plugin-transform-runtime --dev
yarn add @babel/plugin-proposal-class-properties --dev
yarn add @babel/preset-env --dev
yarn add @babel/runtime --dev

// 2. 在.babelrc文件中书写以下代码
{
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties"
  ],
  "presets": [
    "@babel/preset-env"
  ]
}

// 3. 在webpack配置中书写以下代码
{
  test:/\.js$/,
  use:'babel-loader',
  exclude:/node_modules/ // 排除掉node_modules不需要被babel解析
}

Vue-loader的使用

// 1. 安装解析vue相关的包
yarn add vue
yarn add vue-loader vue-template-compiler --dev

// 2. 在webpack.config.js中书写配置
rules:[
        {
            test:/\.vue$/,
            use:'vue-loader'
        }
]

// 3. 导入vue-loader中的插件VueLoaderPlugin
const { VueLoaderPlugin } = require('vue-loader')
plugins:[
    new VueLoaderPlugin()
]

import&export的使用

// CommonJS规范
// module.exports === exports === {}

// 完整导出
module.exports = {}

const obj = require('./file.js')

// 按需导出
exports.fn = function(){}

const obj = require('./file.js')
const { fn } = require('./file.js')
fn()


// ES6标准模块化规范
// 完整导出
export default {}
import obj from './file.js'

// 按需导出
export const username = 'zxx'
export const fn = function(){}

import { username as name, fn } from './file.js'
console.log(name)
fn()

vue-cli2.0

// 1. 全局安装vue-cli
yarn global add vue-cli

// 2. 初始化基于webpack的项目
vue init webpack vue-project

// 3. 进入项目运行
npm run dev

/*
注意:
1. 修改端口号和自动打开浏览器:/config/index.js 16、17行
2. 如果项目中需要使用less、scss语法,需要自己单独装包,但是不需要写配置
3. 删除默认的路由配置、删除HelloWord组件
*/

vue-cli3.0

// 安装
yarn global add @vue/cli

// 创建项目
vue create vue-project
vue ui 可视化界面配置项目