Webpack概述

Webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。

webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性

Webpack的基本使用

• 创建列表隔行变色项目

1. 新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
2. 新建src源代码目录
3. 新建src -> index.html 首页
4. 初始化首页基本结构
5. 运行npm install jquert -s 命令，安装jQuery
6. 通过模块化的形式，实现列表隔行变色效果

• 在项目中安装和配置webpack

1. 运行npm install webpack webpack-cli -D命令，安装webpack相关的包
2. 在项目根目录中，创建名为webpack.config.js的webpack配置文件
3. 在webpack的配置文件中，初始化如下基本配置

const path = require('path') //导入node.js中专门操作路径的模块
module.exports = {
    mode: 'development', //mode 用来指定构建模式
    entry: path.join(__dirname, './src/index.js'), //打包入口
    output: {
        path: path.join(__dirname, './dist'),//输出文件路径
        filename: 'bundle.js' //输出文件的名称
    }
}
//development 开发模式
//production 发布模式，会压缩代码

4. 在package.json配置文件中的scripts节点下新增dev脚本

"dev":'webpack'

5. 在终端运行npm run dev 命令，启动webpack进行项目打包

配置webpack的自动打包功能

1. 运行npm insatll webpack-dev-server -D命令，安装支持项目自动打包工具
2. 修改packge.json -> scripts 中的dev命令如下：

"dev":'webpack-dev-server'

3. 将src -> index.html中script脚本的引用路径修改为 "/bundle.js"
4. 运行npm run dev 命令，重新进行打包
5. 在浏览器中访问http://localhost:8080地址，查看自动打包结果

配置html-webpack-plugin生成预览页面

1. 运行npm install html-webpack-plugin -D
2. 修改webpack.config.js文件

const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html', //指定要用到的模板文件
    filename: 'index.html' //指定生成的文件名，该文件存在于内存中
})

3. 修改webpack.config.js文件向外暴露的配置对象：

module.exports = {
    plugins: [ htmlPlugin ] //plugins数组是webpack打包期间会用到的一些插件
}

webpack中的加载器

通过loader打包非js模块

• less-loader 打包处理.less相关文件

运行npm i style-loader css-loader less-loader less -D
在webpack.config.js的module -> rules配置
module: {
        rules: [
            { test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }
        ]
    }

• sass-loader 打包处理.scss相关文件

运行npm i style-loader css-loader sass-loader node-sass -D
在webpack.config.js的module -> rules配置
module: {
        rules: [
            { test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader'] }
        ]
    }

• url-loader 打包处理css中与url路径相关的文件

配置postCSS自动添加css的兼容前缀

1. 运行npm i posrcss-loader autoprefixer -D
2. 在项目根目录创建postcss的配置文件postcss.config.js，并初始化如下配置

const autoprefixer = require('autoprefixer')
module.exports = {
    plugins: [ autoprefixer ]
}

3. 在webpack.config.js的module -> rules数组中，修改css的loader

module: {
    rules: [
        { test: /\.css$/, use: ['style-loader', 'css-loader','postcss-loader'] }
    ]
}

打包样式表中的图片和字体文件

1. 运行npm i url-loader file-loader -D
2. 在webpack.config.js的module -> rules中添加配置

module: {
    rules: [
        { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2?/, use: [ 'url-loader?limit=16940' ] }
    ]
}