这是我参与「第四届青训营」笔记创作活动的的第四天，今天主要学习Webpack。

一、本堂课重点内容

什么是Webpack
Webpack打包核心流程
Loader组件
如何学习Webpack

二、详细知识点介绍

什么是Webpack

一句话概括：webpack是一个模块打包工具（module bundler） 。

前端项目开发需要大量资源文件并且互相引用，手动管理这些资源过程繁琐，而工程化工具的出现将解决这些问题。

使用Webpack

1. 基本使用方法

安装

npm install webpack webpack-cli --save-dev

编辑配置文件

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

执行编译命令

npx webpack --config webpack.config.js

2. 核心流程

3. Webpack

关于Webpack的使用方法,基本都围绕配置”展开,而这些配置大致可划分为两类:

流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
工具类:主流程之外，提供更多工程化能力的配置项

流程类配置

配置总览

使用

文件结构
声明入口entry
声明产物出口output

Loader组件

为了处理非标准JS资源，设计出资源翻译模块—— Loader用于将资源翻译为标准JS 。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。

使用示例

首先安装相对应的 loader：

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

配置，指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：

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

Loader链式应用

less-loader:实现less => css的转换
css-loader:将CSS包装成类似module.exports = "${css]”的内容，包装后的内容符合JavaScript语法
style-loader:将css模块包进require语句，并在运行时调用injectStyle 等函数将内容注入到页面的style标签

插件

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

配置

//**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;

学习方法

实践练习例子

Webpack 处理 css

const path = require( "path" );
module.exports = {
entry: "./ src/index " ,
output : {
    filename: "[ name].js",
    path: path.join(__dirname， "./dist" ),
},
module: {
// css处理器
    rules : [{
        test: /\.css/i,
        use: [
        "style-loader",
        "css-loader"
        ],
     }],
   },
};

使用Webpack——接入Babel

const path = require( "path" );
module.exports = {
    entry : "./src/index",
    output : {
        filename: "[ name] .js ",
        path: path.join( __dirname, " ./dist" ),
    },
    module: {
        rules: [{
        test:/\.js?$/,
        use:[{
            loader: 'babel-loader' ,
            options: {
                presets: [
                           ['ababel/preset-env ']
                         ]
                        }
                    },]
            }],
    }，
};

使用 Webpack——生成HTML

const path = require( "path " );
const HtmlwebpackPlugin = require( 'html-webpack-plugin ');
module.exports = {
    entry : "./ src/index" ,
    output : {
        filename: " [ name].js ",
        path : path.join( __dirname, "./dist" ),
        },
    plugins: [ new HtmlwebpackPlugin( ) ]
    };

课后个人总结

webpack作为最热门的前端打包工具之一，系统学习了解对于工程化进行前端开发还是非常有益的。

Webpack知识体系|青训营笔记