Webpack 使用

简介

Webpack 主要有五个核心属性

　　1.Entry

　　　　入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图

　　2.Output

　　　　输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

　　3.Loader

　　　　Loader 让 webpack 能够去处理那些非 JavaScript 文件 ( webpack 自身只理解 JavaScript )

    　　　例如：.img .css

　　4.Plugins

　　　　插件( Plugins )可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。

 使用

webpack 默认的入口和出口文件分别是：

// 默认入口文件
./src.js
./src/index.js
// 默认出口文件
./dist/main.js

在不进行配置的情况下，终端使用 webpack 命令，会默认寻找 ./src.js(json, wasm)，然后寻找 ./src/index.js(json, wasm)，输出为 ./dist/main.js

运行指令

开发环境

如下所示，入口文件为 ./src/index.js，打包后输出到 ./build/main.js，打包环境为开发环境 dev

webpack ./src/index.js -o ./build --mode=development

生产环境

webpack ./src/index.js -o ./build --mode=production

注意：

1.由于没有添加额外配置，webpack 仅能处理 .js/.json 文件,不能处理 .css/.img 等其他资源

2.生产环境和开发环境均能能将ES6编译

3.生产环境下会压缩代码

打包资源

通过在根目录中配置 webpack.config.js 文件可以设置打包配置文件

webpack.config.js 的构造工具都是基于Node.js平台运行的,模块化默认采用commonJS

如下：

// webpack.config.js
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    // webpack配置
    // 入口起点
    entry: "./src/index.js",
    // 输出
    output:{
        // 输出文件名
        filename: "built.js",
        // 路径
        path: path.resolve(__dirname, "build")
    },
    // loader配置
    module:{
        rules:[
            // 详细loader配置
            {
                // 匹配哪些文件
                test:/\.css$/,
                // 使用哪些loader处理
                use:[
                    // use中loader执行顺序,从下到上(从右到左),依次执行
                    // 创建style标签,将js中的样式资源插入进去,添加到head中生效
                    "style-loader",
                    // 将css文件变成commonjs模块加载到js中,里面内容是样式字符串
                    "css-loader"
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: "url-loader",
                options: {
                    // 图片大小小于8kb, 就会被base64处理
                    // 优点:减少请求数量(减轻服务器压力)
                    // 缺点:图片体积会更大(文件请求时间变长)
                    limit: 8 * 1024,
                    // 给图片重命名
                    // [hash:10]取哈希前10位
                    // [ext]原扩展名
                    name: "[hash:10].[ext]",
    　　　　　　　　　 // 输出目录
　　　　　　　　　　　　outputPath: "img"
                }
            },
            {
                // 处理html中的img等标签引入图片
　　　　　　　　　 test: /\.html$/,
                loader: "html-loader",
            },
            {   // exclude 除了XXX以外所有
                exclude: /\.(html|css|js)$/,
                // 可以交给file-loader处理
                loader: "file-loader",
                option:{
                    name: "[hash:10].[ext]",
　　　　　　　　　　　　// 输出目录
　　　　　　　　　　　　outputPath: "medias"
                }
            }
        ],
    },
    // plugins配置
    plugins:[
        // 详细plugins配置
        // html-webpack-plugin
        // 默认会创建一个空的HTML, 引入打包输出的所有资源(js/css)
        // new HtmlWebpackPlugin()
        // 需求:把结构引进来
        new HtmlWebpackPlugin({
            // 复制指定html文件,并引入打包输出的所有资源
            template: "./src/index.html"
        })
    ],
    // 模式
    mode: "development",
}

配置开发服务器

webpack中还可添加 devServer 属性，使用 webpack serve 启动热更新

...
devServer: {
    // 启动使用webpack serve
    // 项目构建后路径
    watchFiles: path.resolve(__dirname, "build"),
    // 启动gzip压缩
    compress: true,
    // 端口号,直接使用localhost启动
    port: 3000,
},
...