webpack小白入门之核心概念【1-2】

经过 npm script 运行 webpack

在package.json文件中运行的脚本，默认是能够读取到 node_modules/.bin/下面的因此命令的经过npm run build 运行打包

原理：模块的局部安装会在node_modules/.bin目录下建立软连接

在package.json的scripts中添加一条脚本命令： "build":"webpack",

{
  "name": "webpack.1.2",
  "version": "1.0.0",
  "description": "经过 npm script 运行 webpack",
  "main": "index.js",
  "scripts": {
    "build":"webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5"
  }
}
复制代码

经过在终端运行npm run build 便可完成打包项目。

webpack 核心概念之entry用法

在webpack.config.js文件中：

1. 单入口：entry是一个字符串。

   module.exports = { entry:'./src/file.js' }

2. 多入口：entry是一个对象

   module.exports = { entry: { index: './src/index.js', search: './src/search.js' } }

webpack 核心概念之Output的用法

1. Output用来告诉webpack如何将编译后的文件输出到磁盘

   module.exports = {
      entry: './src/index.js',
      output: {
        path: path.join(__dirname, 'dist'),  // 单入口只要配置path和filename这两个参数
        filename: 'bundle.js'
      },
      mode:'production'
    }
   复制代码

2. Output多入口配置

   module.exports = {
      entry: {
        index: './src/index.js',
        search: './src/search.js'
      },
      output: {
        filename: '[name].js',  // 经过占位符确保文件名称的惟一性
        path: __dirname + '/dist'
      },
      mode:'production'
    }
   复制代码

webpack 核心概念之loaders的用法

webpack的开箱即用只支持js和json两种文件类型，经过loaders去支持其余文件类型，而且将他们转化成有效的模块，而且能够添加到依赖图中，loaders自己是一个函数，接受源文件做为参数，返回转换后的结果。

常见的loaders

名称	描述
babel-loader	转换ES6ES7等新特性语法
css-loader	支持.css文件的加载和解析
less-loader	将less转换为css
ts-loader	将ts转换为js
file-loader	进行图片，字体等的打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包js和css

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.txt$/, use: 'raw-loader'    // test 指定匹配规则 use 指定使用的loader名称
      }
    ]
  }
}
复制代码

webpack 核心概念之plugins的用法

插件用于bundle文件的优化，资源管理和环境变量注入，做用于整个构建过程

常见的plugins

名称	描述
CommonsChunkPlugin	将chunks相同的模块代码提取成公共js文件
CleanWebpackPlugin	清理构建项目
ExtractTextWebpackPlugin	将chunks相同的模块代码提取成公共js文件
CommonsChunkPlugin	将css从bundle文件里提取成独立的css文件
CopyWebpackPlugin	将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin	建立html文件去承载输出的bundle
UglifyjsWebpackPlugin	压缩js
ZipWebpackPlugin	将打包出的资源生成一个Zip包

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.txt$/, use: 'raw-loader'    // test 指定匹配规则 use 指定使用的loader名称
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'  //  建立html文件去承载输出的bundle
    })
  ]
}
复制代码

webpack核心概念之mode的用法

概念：Mode用于指定当前的构建环境是：production ， development ，仍是 none 。设置mode的值，能够使用webpack在相应阶段的内置函数，默认值为production（webpack4.x之后才有的概念），若是是productin，webpack会默认开启一些在生产阶段才使用的内置功能，以下参考：

选项	描述
development	设置process.env.NODE_ENV的值为development，开启NameChunksPlugin和NameModulesPlugin
production	设置process.env.NODE_ENV的值为production，开启FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TerserPlugin
none	不开启任何优化选项

下一篇 webpack小白入门之资源解析【1-3】