Webpack 常用的loader

ZGuangJu 6/7/2019 Webpack

# webpack 常用的包/模块 (loader)

webpack中的loader 一般都在 module 部分中配置
loader 顺序是从右往左，从下到上

示例:

module.export = {
    // 入口
    entry: "./src/index.js",
    // 出口
    ontput: path.resolve(__dirname, "dist"),
    // 输出的文件名
    filename: "bundle.js",
    // 指定webpack 打包要使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test 指定的时规则生效的文件
                test: /\.ts$/,
                use: "ts-loader",
                // use 其他写法，里面可以写配置 options
                // use: [
                //   { loader: "style-loader" ,
                //     options:{ ... }
                //   },
                // ]
                // 要排除的文件
                exclude: /node_modules/,
            }
        ]
    }
}

# 必要的包

webpack
webpack-cli

这俩个时webpack必须要的包

# 常用的

# `webpack` 本地服务器

webpack-dev-server

这个服务器是基于node的，内部使用express.

它是 wxpress 封装,启动并实时编译项目
使用它来启动 webpack 服务，它会执行编译，编译的文件 main.js 不会产生物理文件(默认在项目根目录中)，会将编译存到内存条中
一般使用它需要使用 html-webpack-plugin 插件配合开发
安装

安装webpack-dev-server，修改 package.json 中的 scripts

npm install --save-dev webpack-dev-server

"scripts":{
    "start":"webpack serve --open chrome.exe"
    }

mac中是：

"scripts":{
    "start":"webpack serve --open 'google chrome'"
    }

配置

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
    mode: 'development',
    entry: {
      index: './src/index.js',
      print: './src/print.js',
   },
    devtool: 'inline-source-map',
    devServer: {
    contentBase: './dist', // 为哪个文件夹提供本地服务功能
    // prot:8080,      // 端口号
    inline:true,    // 页面实时刷新
    // historyApiFallback:  // 在SPA页面中，依赖HTML5的history模式
  },
    plugins: [ ... ],
    output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
     publicPath: '/', // 注意公共地址
   },
 };

# 解析 `es6` 转 `es5` 文件

安装

webpack 3.x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

配置

module: {
  rules: [
    {
      test: /\.js$/,
      // 排除
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          // presets: ['@babel/preset-env']
          presets: ['es2015']
        }
      }
    }
  ]
}

# 解析 `TypeScript` 文件

typescript \ ts-loader

打包 typescript (.ts)文件时使用

安装

npm install --save-dev ts-loader

配置

webpack.config.js

module.export = {
  ···
    module: {
      // 指定要加载的规则
        rules: [
          {
            // test 指定的时规则生效的文件
                test: /\.ts$/,
                use: "ts-loader",
                // 要排除的文件
                exclude: /node_modules/,
            }
        ]
    }
}

# 解析 CSS 文件

style-loader / css-loader

安装

npm install --save-dev css-loader
npm install style-loader --save-dev

配置

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]//顺序是从右往左，从下到上
      }
    ]
  }
}

css-loader：加入 a.css 中引入了 b.css 和 c.css，css-loader 会将其合并成一个css文件 style-loader：将合并后的 css 文件挂载到 head 标签内

# 解析 less 文件

less-loader / less

安装

npm install --save-dev less-loader less

配置

webpack.config.js

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

# 解析 sass 文件

sass-loader node-sass webpack

安装

npm install sass-loader node-sass webpack --save-dev

配置

webpack.config.js

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
      }, {
          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
      }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
      }]
    }]
  }
};

如果使用 scss、less、stylus 等 css 预处理器。例如，我们要使用 sass 预处理器，首先要安装 sass-loader和 node-sass。

# 解析图片文件

url-loader / file-loader

安装url-loader

npm install --save-dev url-loader

配置

webpack.config.js

url-loader 功能类似于 file-loader，但是在文件大小（单位byte）低于指定的限制时，可以返回一个 Data URL(base64)。图片大于规定的大小，要用file-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 图片小于limit 的值会转换为 base64 字符串形式，图片大于规定的大小，要用file-loader
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

安装file-loader

npm install --save-dev file-loader

配置

webpack.config.js

module.exports = {
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:"bundle.js",
    // 设置 file-loader 时有时需要设置 publicPath
    publicPath:"dist/", // 设置公共 url
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              // img文件夹
              name:'img/[name].[hash:8].[ext]',
            }
          }
        ]
      }
    ]
  }
}

img : 文件要打包到的文件夹

[name] : 获取图片原来的名字，放在打包后的文件中

hash:8 : 8位哈希值，防止重名

ext : 使用图片原来的扩展名

file-loader 的增强版，除了上述功能，还可以将文件转换为 base64 URI

# 解析 vue 文件

项目中安装

npm i vue-loader vue-template-compiler --save-dev

配置

module.exports = {
  module: {
  rules: [
          {
            test: /\.vue$/,
            use: [
                {
                  // 高版本需要一个插件 否则报错
                  loader: 'vue-loader',
                }
            ]
        }
    ]
 },
  resolve:{
    // 如果想导入时想省略扩展名用以下配置
    extensions:['.js', '.jsx','.css','.vue'],
    // alias 别 名
    alias:{
      'vue$':'vue/dist/vue.ue.esm.js',
      // 'vue$':'vue/dist/vue.ue.runtime.js',
    }
  }
}

# `postcss-loader`

通过 postcss-loader 来给新属性添加厂商前缀。

Webpack 使用 Webpack 常用的插件

ZGuangJu'S NoteBook

Choose mode