码迷,mamicode.com
首页 > Web开发 > 详细

webpack简介

时间:2018-09-05 17:40:48      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:named   ade   require   gpl   webp   ports   raw   span   nat   

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

webpack的核心:

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

入口(entry):用来规定使用哪个模块作为入口,进入入口后,webpack会找出入口模块所依赖的其他模块进行处理。

配置 entry 属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src

举个栗子:

module.exports = {
  entry: ‘./app/index.js‘
};

以上例子其实是以下代码的简写

 

const config = {
  entry: {
    main: ‘./app/index.js‘
}
};

 

输出(output):output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist

举个栗子:

module.exports = {
  output: {
    path: "/public",// 打包后的文件存放的地方
    filename: "bundle.js"// 打包后输出文件的文件名
  }
}

loader:webpack自身只理解javascript文件,所以loader的作用就是处理非javascript文件,然后webpack再对他们进行处理。

在 webpack 配置中定义 loader 时,要定义在 module.rules中。

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: ‘raw-loader‘ }
    ]
  }
};
module.exports = config;

主要的两个配置:

test: 需要被转换的文件后缀

use:使用哪种类型的loader去转换

这就相当于告诉webpack,当遇到.txt文件时,需要先用loader处理后再进行打包。

插件(plugins):使用插件,需要通过require引入,然后把它添加到plugins数组中,并通过new操作符来创建它的实例。

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

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: ‘raw-loader‘ }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: ‘./src/index.html‘})
  ]
};

module.exports = config;

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

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

如果设置为development,则会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin

如果设置为production 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePluginFlagIncludedChunksPluginModuleConcatenationPluginNoEmitOnErrorsPluginOccurrenceOrderPluginSideEffectsFlagPlugin 和 UglifyJsPlugin.

 

webpack简介

标签:named   ade   require   gpl   webp   ports   raw   span   nat   

原文地址:https://www.cnblogs.com/lqw007/p/9592122.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!