阅读 37

webpack如何零基础起步

这是我参与8月更文挑战的第21天,活动详情查看:8月更文挑战

起步流程

安装指令: cnpm webpack webpack-cli –g//全局安装
cnpm webpack webpack-cli –D//本地安装

运行指令

  • 开发环境:webpack [入口文件] –o [输出文件] –mode=development
    从入口文件开始打包,输出到出口文件,是开发环境
  • 生产环境:webpack [入口文件] –o [输出文件] –mode=production
    会压缩js代码

整个文件打包后的代码类似于:

(function (module) {
  /*...
   * 函数体
   * ...*/
})({
  // 参数
});

复制代码

loader 和 plugin

Loader

Webpack只能处理js、json资源,其他的得依托loader。

用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在build中引入这些依赖。loader可以将文件从不同的语言(如TypeScript)转换为JavaScript,或者将内联图像转换为data URL。比如说:CSS-Loader,Style-Loader等。

特点:单一,一个loader只处理一件事;所以可能需要引入好很多loader
用法:一个loader用字符串,多个的话用数组罗列
Loader顺序:默认从右向左使用; ['a','b']先执行b再执行a
Loader还可以写成对象:此时可以传一个参数options

Plugin

目的在于解决loader无法实现的其他事,从打包优化和压缩,到重新定义环境变量,功能强大到可以用来处理各种各样的任务。
webpack提供了很多开箱即用的插件:比如CommonChunkPlugin主要用于提取第三方库和公共模块,避免首屏加载的bundle文件,或者按需加载的bundle文件体积过大,导致加载时间过长,是一把优化的利器。而在多页面应用中,更是能够为每个页面间的应用程序共享代码创建bundle.

webpack 配置的基本模板

这里是一个webpack简单配置的模版,有些重要的地方我已经给出了注释,大家可以借鉴一下哈

let path = require("path"); //内置模块,通过resolve来将地址解析为绝对路径\
let HtmlWebpackPlugin = require("html-webpack-plugin");
let miniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  devServer: {
    //开发服务器配置
    port: 3000,
    progress: true, //显示进度条
    contentBase: "./build", //指定目录
    compress: true, //压缩
  },
  mode: "development" /*有两种 1、production生产环境,会代码压缩
2、development,开发环境,不压缩代码*/,
  entry: "./src/index.js", //入口,
  output: {
    filename: "bundle.js", //打包后的文件名
    path: path.resolve(__dirname, "build"), //路径必须是一个绝对路径,__dirname是指在当前目录下
  },
  module: {
    //模块
    rules: [
      //规则
      //css-loader 解析 @import这种写法的
      //style-loader 把css插入到head标签中
      {
        //test 正则 来匹配文件
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
            options: {},
          },
          "css-loader",
        ],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader",
            options: {},
          },
          "css-loader",
          {
            loader: "less-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    //数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
    }),
    new miniCssExtractPlugin({
      filename: "",
    }),
  ],
};

复制代码
文章分类
前端
文章标签