webpack 用法

Entry 

指定打包的入口

单入口：entry 是一个字符串

module.exports= {
    entry: './path/to/myfile.js'
}

多入口：entry 是一个对象

module.exports= {
    entry: {
        app: './src/app.js',
        adminApp: './src/adminApp.js'
    }
}

Output

指定编译后的文件输出到那里

// 单入口
module.exports= {
    entry: './path/to/myfile.js',
    output: {
        filename: 'bundle.js',
        path:__dirname + '/dist'
    }
}
// 多入口
// 运用占位符的概念，确保文件名称的唯一
module.exports= {
    entry: './path/to/myfile.js',
    output: {
        filename: '[name].js', 
        path:__dirname + '/dist'
    }
}

Loaders

将原生不支持的类型通过 loaders 转换 为 JS 或者 JSON文件

• test 指定匹配的规则
• use 指定使用的loader 名称

module.exports= {
    entry: './path/to/myfile.js',
    output: {
        filename: 'bundle.js',
        path:__dirname + '/dist'
    },
    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader' }
        ]    
    }
}

常见的 Loaders 

名称	描述
babel-loader	转换 ES6、ES7等JS新特性语法
css-loader	支持.css 文件的加载和解析
less-loader	将Less 文件转换成css
ts-loader	将TS 转为JS
file-loader	进行图片、文字等的打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包JS和CSS

 

Plugins

插件用于bundle 文件的优化，资源管理和环境变量注入

作用于整个构建过程 开始到结束都可以 用到

常见的Plugins 

名称	描述
CommonsChunkPluign	将chunks相同的模块代码提取成公共js
cleanWebpackPlugin	清理构建目录
ExtractTextWebpackPlugin	将css从bunlde文件里提取成一个独立的CSS文件
CopyWebpackPlugin	将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin	创建html 文件去承载输出的bundle
UglifyjsWebpackPlugin	压缩JS
ZipWebpackPlugin	将打包出的资源生成一个zip 包