webpack的基本使用及常用的loader配置

webpack是一个前端项目构建工具(打包工具),提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能

1. webpack的基本使用

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

const { join } = require('path') 
module.exports = {
    //mode用来设置构建的模式,参数有两个:development(开发模式),production(生产模式)
    mode:'development'; 
    //设置打包的入口
    entry:join(__dirname,'./src/index.js');
    //设置打包的出口
    output:{
        //输出的路径
        path:join(__dirname,'./dist'); 
        //输出文件的名字
        filename:'bundle.js'
    }
}

4. 在package.json配置文件的scripts中添加脚本,如:"dev": "webpack",这样在命令行上运行npm run dev就可以进行打包了
5. 在html页面中就可以通过script标签进行导入,注意导入的应该是打包后的文件

2. webpack的自动打包

1. 运行npm install webpack-dev-server –D命令,安装工具
2. 修改scripts脚本中dev命令,改为"dev":"webpack-dev-server"
3. 因为webpack-dev-server命令把文件打包在根目录,所以在html页面中需要把导入的路径改为根目录,如/bundle.js

3. webpack的预览页面

1. 运行npm install html-webpack-plugin –D命令,安装工具
2. 在webpack.config.js文件中,写入以下代码

    const HTMLplugin = require("html-webpack-plugin")
    const htmlPlugin = new HTMLplugin({
        template:""  //需要显示的文件
        filename:"" //指定生成的文件名,该文件不会显示在目录中
    })
    // 在导出中添加一个plugins属性
    module.exports = {
        plugins:[htmlPlugin]
    }

4. webpack配置自动打开浏览器

修改scripts脚本中"dev":"webpack-dev-server --open"

5. webpack中打包的规则

6. 打包处理css的loader加载器

1. 运行 npm i style-loader css-loader -D 命令,安装工具
2. 在webpack.config.js中增加如下的代码

    //test表示匹配的文件类型,use:表示要调用的loader
    //注意loader的调用是从后往前,所以loader的位置不能随便乱动
    module.exports = {
        module: {
            rules: [
                { test: /\.css$/, use: ['style-loader', 'css-loader'] }
            ]
        }
    }

7. 打包处理less的loader加载器

1. 运行 npm i style-loader css-loader less-loader less -D 命令,安装工具
2. 在webpack.config.js的rules中添加一条规则:

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

8. 自动添加兼容前缀的loader加载器

1. 运行 npm i postcss-loader autoprefixer -D 命令,安装工具
2. 在项目的根目录创建一个postcss.config.js配置文件,并进行一下配置

    const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
    module.exports = {
        plugins: [ autoprefixer ] // 挂载插件
    }

3. 在webpack.config.js的rules中添加一条规则

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

9. 打包图片和字体文件的loader加载器

1. 运行 npm i url-loader file-loader -D 命令,安装工具
2. 在webpack.config.js的rules中添加一条规则

    limit 用来指定图片的大小，单位是字节(byte),如果图片的大小小于limit，那么就会被转为 base64 图片
    {
        test: /\.(jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/,
        use: 'url-loader?limit=16940'
    }

10. 处理js文件中的高级语法的loader加载器

1. 安装以下包

    //安装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

2. 在项目根目录,创建babel.config.js配置文件,并进行如下配置

    module.exports = {
        presets: [ '@babel/preset-env' ],
        plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-
        class-properties’ ]
    }

3. 在webpack.config.js的rules中添加一条规则

    // exclude是表示不需要处理里面的js文件
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }