webpack的基本使用配置

我们先了解一下webpack是什么，为什么要使用webpack呢？

webpack是什么

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

为什么要使用webpack

前端项目为了简化开发的复杂度，我们会在项目中引入很多依赖包，如TypeScriptt这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；还有scss，less等CSS预处理器等，这样大大提高了我们开发的效率，但是很多都是浏览器不识别的，我们需要额外的去处理才能使浏览器识别，webpack的出现很好的解决了这方面的问题，webpack会静态的分析各个文件直接邮什么依赖关系，分析完成后，webpack会把这些文件组织起来，同类型的文件进行合并，这样就生成了我们生产环境使用的代码

webpack的四大核心

1. 入口（entry）
   指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
   入口分单入口和多入口
   （1）单入口配置语法
   webpack.config.js

const config = {
  entry: './src/index.js'
};
module.exports = config;

(2)多入口配置语法(对象语法)
webpack.config.js

const config = {
  entry: {
    app: './src/app.js',
    index: './src/index.js'
  }
};

2. 输出（output）
   配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。
   （1）单入口输出
   webpack.config.js

const config = {
  output: {
    filename: 'bundle.js',//用于输出文件的文件名
    path: '/home/proj/public/assets'//目标输出目录 path 的绝对路径
  }
};

module.exports = config;

(2)多个入口输出

{
  entry: {
    app: './src/app.js',
    index: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}
// 写入到硬盘：./dist/app.js, ./dist/index.js

3. loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

基础用法

//webpack.config.js
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

loader预处理文件类型查看官网

4. 插件（plugins）

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事

//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

5.在webpack新增了mode配置
提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。
根据不同的模式可以打不同环境的包

module.exports = {
 // mode: 'production'//线上模式
 mode:'development'//开发模式，
};

6.webpack4有个新特性0CJS
0CJS的含义是0配置，webpack4受Parce打包工具启发，尽可能的让开发者运行项目成本变低，为了做到0配置，webpack4不再强制需要webpack.config.js作为打包的入口配置文件了，它默认的入口为./src/和默认出口./dist,这个针对小型项目