webpack学习笔记

// 简单的创建html文件,并把生成的js文件自动引入html中
var HtmlWebpackPlugin = require('html-webpack-plugin');

// 每次打包删除dist文件夹,但是为啥要这样定义啊
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// path后面的绝对路径不容易些,需要引入一个node的核心模块
const path = require('path')

module.exports = {
    // 配置模式production被压缩 development不被压缩
    mode:'development',
    devtool:'cheap-nodule-source-map',
    // 从哪个文件开始打包
    entry:{
        main:'./src/index.js'
    },
    devServer:{
        // 启动一个服务器,服务器的根路径是'./dist
        contentBase:"./dist",
        // 自动打开浏览器,并且打开地址
        open:true
    },
    // 打包模块时,若不知道模块该怎么打包,就在模块配置里面做文章
    module:{
        // 规则,带有s的都是数组格式
        rules:[{
            // 以jpg结尾的文件
            test:/\.(jpg|png|gif)$/,
            // 里面写需要使用的loader
            use:{
                // 使用file-loader,需要额外安装
                // url-loader会把图片转化成一个base64加到页面
                loader:'url-loader',
                // 配置参数
                options:{
                    // 生成文件的名字
                    // [原来文件的名字].[原来文件的后缀]
                    name:'[name].[ext]',
                    // 配置文件打包之后的路径
                    outputPath:'images/',
                    // 设置文件大小,若是文件大小超过这个值,就会单独打包一个图片文件,若是小于则是直接转化成base64
                    limit:2048
                }
            }
        },{
            test:/\.scss$/,
            use:[
                'style-loader',
                {
                    loader:'css-loader',
                    options:{
                        // 引入的scss文件,在引入之前需要走两个loader,也就是下面两个
                        importLoaders:2,
                        // 开启模块化打包
                        // modules:true
                    }
                },
                'sass-loader',
                'postcss-loader'
            ]
        },{
            // 以jpg结尾的文件
            test:/\.(eot|ttf|svg)$/,
            // 里面写需要使用的loader
            use:{
                // 使用file-loader,需要额外安装
                // url-loader会把图片转化成一个base64加到页面
                loader:'file-loader',
                // 配置参数
                options:{}
            }
        },
    ]},
    // 文件存放信息
    output:{
        // 公共地址,可以加一个cdn的地址
        publicPath:'/',
        // 打包后文件的名字
        filename:'dist.js',
        // 打包出来的文件放到哪个文件夹下面,后面要跟一个绝对路径
        path:path.resolve(__dirname,'dist')
    },
    // 插件安装位置
    // plugins可以在webpack打包到一定时刻做一些事情,
    plugins: [
        new HtmlWebpackPlugin({
        template:'./src/index.html'
    }),
    // 每次打包清理dist文件夹
    new CleanWebpackPlugin()
]
}