Webpack常用的Loader和插件

[itstrive]

常用的loader

• babel-loader 将 ES2015+ 代码编译为 ES5。
• ts-loader 将TypeScript 代码编译为ES5
• css-loader 解析@import 和 url()， 并对引用的依赖进行解析
• style-loader 在HTML中注入 <style> 标签,将css添加到DOM中，通常与 css-loader结合使用
• sass-loader 加载sass/scss 文件并编译成CSS
• less-loader 同sass-loader 类似，编译的是 less文件
• postcss-loader 使用PostCss加载和编译CSS文件
• html-loader 将HTML导出为字符串
• vue-loader 加载和转译Vue组件
• file-loader 将文件提取到输出目录，并且返回相对路径
• url-loader 和 file-loader一样，如果文件小于配置的限制，可以返回 Data URL

loader简单使用

module.exports = {
 module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }
    ]
  }
};

常用的插件(有webpack自带的，有第三方的)

• HtmlWebpackPlugin 自动生成入口文件，并将最新的资源注入到HTML中
• CommonsChunkPlugin 用以创建独立文件，常有鸿来提取多个模块中的公共模块
• DefinePlugin 用以定义在编译时使用的全局常量
• DllPlugin 拆分 bundle 减少不必要的构建
• ExtractTextWebpackPlugin 将文本从bundle中提取到单独的文件中。常见的场景是从bundle中将Css提取到独立的Css文件中
• HotModuleReplacementPlugin 在运行过程中替换、添加或者删除模块，无需重新加载整个页面(俗称热重载)
• UglifyjsWebpack Plugin 对js进行压缩、减小文件的体积
• CopyWebpack Plugin 将单个文件或者整个目录复制到构建目录. 一个常用的场景是将项目中的静态图片不经构建直接复制到构建后的目录

plugin简单实用:

// Webpack .config.js
const HtmlWebpack Plugin = require('html-Webpack -plugin');
const Webpack  = require('Webpack ');

const config = {
  plugins: [
    new Webpack .optimize.UglifyJsPlugin(), //webpack自带的压缩
    new HtmlWebpack Plugin({template: './src/index.html'})
  ]
};

module.exports = config;