webpack4基础入门操作(二)(讲解下webpack的配置内容)

前序:我之所以开始写这个系列,是因为我最近出去看了下外面的情况,发现技术更新的脚步太快了。我的技术栈已经完全落伍了。

所以准备今年学习写新的东西,而React、webPack4就是我的第一步。前面我看了React的相关内容后,不太明天如何打包,所以有了写这个系列的想法。

 

上一章讲到:在package.json文件中添加“scripts”配置:"build": "webpack --progress --colors",就可以在控制台直接使用npm run build做编译。为啥呢?

今天要讲解最基础的内容:webpack4的基础配置元素:(以下内容本人都是学习官网)

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)
  • 模式

入口(entry):就是告诉打包工具,模块的门在哪里。指定初始运行的JS文件,并根据此文件构建其内部依赖图。

module.exports = {
  entry: './path/my/file.js'
};

 

输出(output):就是告诉打包工具,你打包集成的文件放哪里,名称叫啥。输出对应的打包文件。

const path = require('path');

module.exports = {
  entry: './path/my/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'myfirstbundle.js'
  }
};

 

loader:webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript),如:css、ts等。

const path = require('path');

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

module.exports = config;

以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:test 和 use。这告诉 webpack 编译器(compiler) 如下信息:

“嘿,webpack 编译器,当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时,在你对它打包之前,先使用 raw-loader 转换一下。”

 

插件(plugins):loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务,除了转换以外的事情。

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;

webpack 提供许多开箱可用的插件!查阅我们的插件列表获取更多信息。

 

模式 :通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化

module.exports = {
  mode: 'production'
};

 

到了这里我们已经有了一个基本的概念。问题是:现在都是一个入口和一个输出。真正的项目不可能这样。那么如何多个入口呢?

其次常用的插件库有哪些?作用是啥? 常用的loader有哪些?作用是啥?都不清楚。所以我们还是菜鸟中的菜鸟。只是站在门口看了一眼,还只是看见了一角,所以继续后续吧。

就到这,我也才开始学习,我后面基本会保持两天一更的。努力吧,少年~

 

posted @ 2019-07-14 21:49 kimi_gyj 阅读(...) 评论(...) 编辑 收藏