webpack4的基本使用

webpack 是一个现代JS应用的静态模块打包器（static module bundler）。当运行webpack时，它就将项目中的各种模块（比如js,css, png, cjs，sass等各种模块）会打包成静态资源。如下图

webpack功能非常强大，但学习起来也很简单。只需要理解4个核心概念就好：Entry, Output, Loaders, Plugins

本篇将简要介绍这4个概念。

目录

1，Entry

2，Output

3，Loaders 

4，Plugins 

---

1，Entry

入口文件(Entry)就是打包的开始文件，webpack会辨别出入口文件所依赖的其他模块或者库文件，并将他们打包在一起。

默认情况下，其值是 ./src/index.js, 但也能配置其他路经甚至多个入口文件。比如:

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

上面这种写法是如下写法的缩写:

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

2,Output

Output 告诉webpack将打包的文件存放何处，以及如何命名。默认的路径是 ./dist/main.js ，基本用法：

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'), //__dirname 表示当前路径
    filename: 'my-first-webpack.bundle.js' // 文件名称
  }
};

多入口文件：

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

// writes to disk: ./dist/app.js, ./dist/search.js

3，Loaders 

webpack在没有其他工具的帮助下，只能打包JS文件。Loaders可以将其他类型的文件（比如.css 等）转化成你的英语可以使用的模块。Loaders在webpack配置中有两个属性：

  1）.test 属性：哪个（些）文件需要被转换

  2) use属性: 哪个loader可以实现这个转换

const path = require('path');

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

举例：

比如，你需要打包CSS文件和TypeScript文件为js，那么你需要在命令行输入：

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后在配置文件webpack.config.js 中，加上：

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

4，Plugins 

loaders被用来转换特定类型的模块，而插件（plugins)可以做的更多，比如打包优化、资源配置和环境变量注入等。

要使用某个插件，需要require（） 该插件，并把它的实例加到plugins数组中，

onst HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

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

以上就是webpack的核心概念。webpack的强大功能依赖loader和各种插件来实现。