webpack学习教程小结

webpack学习总结

@version webpack v4.5.0

cmd

vscode
个人建议学习最新的技术还是要看英文官方文档

简述

webpack是一个现代JavaScript应用程序的静态模块打包器

脚手架是指通过输入简单指令帮助你快速搭建好一个基本环境的工具，「为减少重复性工作而做的重复性工作」的工具.

四个核心概念

• 入口（entry）
• 输出（output）
• loaders
• 插件（plugins）

entry

资源入口，使用哪个模块来构建依赖图

module.exports = {
    entry: './path/app.js'
}

output

告诉webpack在哪里输出创建的bundles，以及如何命名这些文件

webpack.config.js

const path = require('path')

module.exports = {
    entry: './path/app.js',
    output: {
        path: path.resolve(__dirname. 'dist'),
        filename: 'you-define.bundle.js'
    }
}

loaders

loaders让webpack能够去处理那些非JavaScript文件（webpack自身只能理解JavaScript）。loader可以将所有类型的文件转换为webpack能够处理的有效模块。

在更高级别上，loaders 在webpack配置中有两个用途：

1. test 属性用于标识哪些文件需要转换

2. use 属性 用于标识哪些loader需要被使用

   const path = require('path')
   const config = {
      output: {
          filename = 'app.bundle.js'
      },
      module: {
          rules: [
              test: /\.css$/,
              use: ['style-loader', 'css-loader']
          ]
      }
   }

Plugins

使用插件需要，require() 到 plugins 数组，用 new 操作符来创建实例

const HtmlWebpackPlugin = require('html-webpack-plugin')  //installed via 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;

Mode

通过设置 mode 参数来设置开发环境和生产环境， 可以使用webpack内置优化与所选模式一致。