初探webpack-深入浅出一

学习webpack，三天时间记录四个文档。一次性更新~没有完整的流程，有时间给补上吧!

html-webapck-plugin

• 注意：依赖webpack / webpack-cli
• 生产页面

安装

    
        npm i html-webpack-plugin -D
    

引入

    
        const HTMLWebpackPlugin = require('html-webpack-plugin');
    

使用

    
        plugins: [
            new HTMLWebpackPlugin();
        ]
    

属性

    
        new HTMLWebpackPlugin({
            chunks: [依赖JS],
            filename: '模块名称',
            template: '模块地址',
            hash: true, // 不缓存
            minify: {
                collapseWhitespace: true, // 压缩空白
                removeAttributeQuotes: true // 删除属性双引号
            }
        });
    

clean-webpack-plugin

• 删除东西

下载

    
        npm i clean-webpack-plugin -D
    

引入

    
        const CleanWebpackPlugin = require('clean-webpack-plugin');
    

使用

    
        plugins: [
            new CleanWebpackPlugin([path.resolve(__dirname, '../dist' {
                root: process.cwd(),
                verbose: true,
                dry: false
            })
        ]
    

devServer

webpack-dev-server

下载

    
        npm i webpack-dev-server -D
    

使用

    
        // 服务器
        devServer: {
            // 设置服务器访问目录
            contentBase: path.resolve(__dirname, "../dist"),
            // 服务器IP
            host: 'localhost',
            // 端口
            port: '9900',
            // 自动打开页面
            open: true,
            // 热更新
            hot: true
        }
    

• 启动热更新

配置插件：new webpack.HotModuleReplacementPlugin();