初始webpack打包

初步认识webpack打包

打包一个最简易的js文件

  1. 创建一个空目录

    1
    npm init //初始化，生成 package.json

  2. 安装webpack

    1
    2
    npm i webpack --save-dev
    npm i webpack-cli --save-dev

  3. 新建webpack.config.js
    内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const path = require('path');//用于路径的处理
    const config = {
      entry:'./src/main.js',//入口文件，webpack从该入口文件中寻找使用到的模块
      output: {
        filename:'bundle.js',//打包后的文件名
        path: path.resolve(__dirname,'dist')//打包后生成的文件目录
      }
    }
    module.exports = config;

  4. 在package.json中增加

    1
    "start": "webpack --config webpack.config.js"

  5. 新建目录src
    在src目录下新建main.js，内容：

    1
    2
    //fastclick库解决移动端300ms延时的问题
    import FastClick from 'fastclick' //main.js只引入了fastclick这个库。webpack打包后的文件应该包含这个库的内容

    安装fastclick 

    1
    npm i fastclick --save

    使用fastclick作为测试用

  6. 执行

    1
    2
    3
    npm run start
    //等同于执行
    webpack --config webpack.config.js

    执行完成后可看到dist目录下生成了bundle.js文件，该文件包含了fastclick模块

模块类型

上面介绍的是js模块的打包，webpack支持哪些模块类型呢？

  • ES2015 import 语句
  • CommonJS require() 语句
  • AMD define 和 require 语句
  • css/sass/less 文件中的 @import 语句。
  • 样式(url(…))或 HTML 文件(<img src=...>)中的图片链接(image url)

通过以上方式引入的文件，都可以被webpack打包

本文地址： http://gehaiqing.com/blog/2018/07/06/20180706-webpack-1-start/