webpack4.x基础配置项用法

迷迷糊糊做点啥
283 阅读3分钟

webpack -- 基础配置项用法

module.exports = {
    mode: 'production',  // 环境
    entry: './src/index.js', // 打包的入口文件 注：如果不写entry默认是./src/index.js
    output: './dist/bundle.js', // 打包的输出文件  注：如果不写output默认是./src/main.js
    module:{ // Loader 配置
        rules: []
    },
    plugins: [] // 插件配置
}

entry -- 入口

1.webpack 官方对'entry'的解释: 入口起点(entry point)示 webpack 应该使用哪个模块，来作为构建其内部'依赖图'的开始。
进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
2.最简单的理解'entry' 是用来指定webpack打包入口
3.通过官方的图来理解，整个图的左侧涉及到入口打包，会通指定的入口，并且将代码和非代码比如图片，字体依赖也会不断
加入到依赖图中

entry 配置单页面应用和多页面

1.来指定一个入口起点（或多个入口起点）
    1.1.单入口entry是一个字符串例如：
        module.exports = {
          entry: './path/to/my/entry/file.js'
        };
    1.2.多入口entry 是一个对象配置例如：
        entry: {
            app:'./src/app.js',
            adminApp:'./src/adminAPP.JS'
        }

outPut -- 出口

1.output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件

单入口配置

module.exports = {
    entry: './src/index.js', // 打包的入口文件 注：如果不写entry默认是./src/index.js
    output: './dist/bundle.js', // 打包的输出文件  注：如果不写output默认是./dist/main.js
}

多入口配置

1.关于'output',中'filename'字段做个说明，你多入口打包，那必然是有多文件输出，因此这里的路径一定不能
固定写死，会报错。
'如果你非要固定写可以这么理解既然你想输出一个打包文件，那其实你在做的是单页面，就不应给有多页面的配置'
2."filename: '[name].js' ",这里的name对应的是entry对象里的key

module.exports = {
    entry: {
        index: './src/index.js',
        sreach: './src/hellowWebpack.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js' // 这种方式通过占位符确保文件名称唯一
    },
}

关于 output 疑问

1.output 为什么一定要用 path.resolve(__dirname, 'xxx') 这种形式呢，与直接写一个相对目录比如 './dist/' 的区别是什么呢？
答：这个 output 的参数 path 必须是一个绝对路径，不能是相对路径的
  • 如图
1.写成相对路径报错
output: {
    path:'../dist' , //path.join(__dirname, 'dist')
    filename: 'bundle.js'
}

Loaders

1.loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 
webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

2.这里解释一下'webpack'开箱即用只支持js 和 json 两种文件类型，因此为了让一些特殊的模块可以支持，例如'ts','图片'一类
可以通过'loader'去支持其他的文件类型把它们转换成有效的模块，并且可以添加到依赖图中

3.'loader' 使用'在 webpack 配置中定义 loader 时，要定义在 module.rules 中','里面包含两个必须属性：test 和 use'
    3.1.test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。('指定匹配规则')
    3.2.use 属性，表示进行转换时，应该使用哪个 loader。（'指定使用的loader名称'）

loaders 使用

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

引用极客时间 《玩转webpack》 课程里图--常见的loaders有哪些如图

关于loaders 一些疑问

1.less 文件经过 less-loader 处理成 .css 文件之后，是否还会经过 css-loader 的处理呢?

答：需要的，每个 loader 一般只做一件事情。拿解析 less 为例，需要先将 less 转换成 css，这个是 less-loader 处理，
处理成 css 之后，但是由于 webpack 并不能识别 css 文件，依然需要 css-loader 将 css 转换成 commonjs 对象放到 js 里面，
最后页面渲染的时候要想把样式显示出来，需要借助 style-loader 或者 MiniCssExtractPlugin.loader 把 css 插入到 html 里面的
 style 或者以 link 外部 css 的方式
'每个 loader 就是一个函数，可以把这个过程理解成流水线的方式'

plugins -- 插件

1.插件用于bundle 文件的优化，资源管理和环境变量注入作用于整个构建过程中
2.用法放到plugins 字段，是一个数组，想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，
这时需要通过使用 new 操作符来创建它的一个实例。

www.webpackjs.com/plugins/

使用效果

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}) // 配置插件
  ]
};

module.exports = config;

mode -- 模块

1.Mode 用来指定当前的构建环境是：'production'、'development'、'none',默认是'production'

使用

module.exports = {
    mode: 'production',  // 环境
    entry: './src/index.js', // 打包的入口文件 注：如果不写entry默认是./src/index.js
    output: './dist/bundle.js', // 打包的输出文件  注：如果不写output默认是./src/main.js
    module:{ // Loader 配置
        rules: []
    },
    plugins: [] // 插件配置
}
  • 引用极客时间 《玩转webpack》 课程里图--Mode内置功能
avatar
文章
阅读
粉丝