webpack初体验

标签：efi   dex   重命名   dir   sass   选择   拓展   webp   file   

const { resolve } = require("path")
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)

module.exports = {
    entry: ‘./src/index.js‘,
    output: {
        filename: ‘built.js‘,
        path: resolve(__dirname, ‘build‘)
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    //创建style标签,将js中的样式资源插入进行，添加到head中
                    ‘style-loader‘,
                    //将css文件变成common.js加载到js中，里面内容是样式字符串
                    ‘css-loader‘
                ]
            },
            {
                test: /\.less$/,
                use: [
                    //创建style标签,将js中的样式资源插入进行，添加到head中
                    ‘style-loader‘,
                    ‘css-loader‘,
                    //将css文件变成common.js加载到js中，里面内容是样式字符串
                    ‘less-loader‘
                ]
            },
            {
                test: /\.scss/,
                use: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘]
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: ‘url-loader‘,
                options: {
                    //limit超过的话会选择file-loader进行打包
                    limit: 8 * 1024 * 1024,
                    //url-loader默认使用es6模块，html-loader使用commonjs所以解析会出问题
                    //关闭url-loader的es6模块化，使用commonjs进行解析
                    esModule: false,
                    //给图片进行重命名
                    //[hash:10]取图片的hash前10位
                    //[ext]取文件原来的拓展名
                    name: ‘[hash:10].[ext]‘
                }
            },
            {
                test: /\.html$/i,
                //处理html中的img
                loader: ‘html-loader‘,
                options: {
                    esModule: false
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: ‘./src/index.html‘,
        })
    ],
    mode: "development"
}

注意：在html中不用再次引入script的js文件，否则就会(ReferenceError: document is not defined)

webpack初体验

标签：efi   dex   重命名   dir   sass   选择   拓展   webp   file   

原文地址：https://www.cnblogs.com/lceihen/p/14584236.html