# 开发环境基本配置

# 目录结构

src
    --css
        iconfont.css
        index.scss
    --iconfont
        iconfont.eot
        iconfont.svg
        iconfont.ttf
        iconfont.woff
        iconfont.woff2
    --imgs
        webpack.png
    index.html
    index.js
webpack.config.js

# 完整代码

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 提取css位为单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const config = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'app.js',
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules: [ // 详细Loader的配置
            // 不同文件必须使用不同的Loader来处理
            {
                test: /\.css$/,
                // use数组中的loader执行顺序是：从数组末尾到数组头 依次执行。
                use: [
                    // 创建<style> 标签 将js中的样式资源插入进行，添加到head中生效
                    // 'style-loader',  // 单独提取css为文件 就不需要创建style标签添加样式

                    MiniCssExtractPlugin.loader,

                    'css-loader'
                    // 将css 文件变成commonjs模块加载到js中，内容是样式字符串
                ]
            }, {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    'less-loader'
                ]
            },
            // sass
            // npm install sass-loader node-sass webpack --save-dev
            // 失败则 npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                }]
            }, {
                // 处理图片资源
                test: /\.(png|jpg|gif)$/,
                // 下载url-loader,file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb ，就会被base64处理
                    // 优点: 减少请求数量（减轻服务器压力）;
                    // 缺点：图片体积会变大（文件请求速度更慢）
                    limit: 8 * 1024,
                    // 默认使用es6模块化解析，html-loader引入的图片是commonjs
                    // 解析会出现[Object Moudle]
                    // 解决方式：关闭url-loader的es6模块化。使用commonjs解析
                    esMoudle: false,
                    // 给图片进行重命名
                    // [hash:10]取图片的hash的前10位
                    // [ext]取文件原来扩展名
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs' // 输出到imgs目录
                }
            }, {
                test: /\.html$/,
                // 处理html文件的img图片（负责引入img 从而能被url-loader处理）
                // 下载 html-loader
                loader: 'html-loader',
            }, {
                // 处理其他资源
                exclude: /\.(html|js|css|less|scss|jpg|png|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'static'
                }
            }
        ]
    },
    plugins: [
        // 插件配置
        // html-webpack-plugin
        // 功能：默认复制一个空的html 自动引入打包输出的所有资源（js/css）
        // 需求：需要有结构的html

        // 复制 './src/index.html'  并自动引入打包输出的所有资源
        new HtmlWebpackPlugin({ template: './src/index.html' }),

        new MiniCssExtractPlugin({
            // 对输出css文件重命名
            filename: 'css/app.css'
        })
    ],
    // 开发服务器devServer ：用来自动化（自动编译、自动打开浏览器、自动刷新浏览器）
    // 只会在内存中编译打包，不会有任何输出
    // 启动devServe的指令：npx webpack-dev-serve [需下载]；
    devServer: {
        // 项目构建后的路径
        contentBase: resolve(__dirname, 'dist'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true
    },
}

module.exports = config;

# src/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack开发环境构建</title>
</head>

<body>
    <div id="box"></div>
    <ul>
        <li><i class="iconfont icon-icon--"></i></li>
        <li><i class="iconfont icon-pinglun_huabanfuben"></i></li>
        <li><i class="iconfont icon-Like"></i></li>
        <li><i class="iconfont icon-Dislikeunlikethumbdown"></i></li>
    </ul>
    <img src="./imgs/webpack.png" alt="">
</body>

</html>

# css/index.scss

#box {
    width: 500px;
    height: 300px;
    background: url(../imgs/webpack.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

← Webpack打包其它资源分离css →