VisYang's Studio.

webpack简单使用

webpack
2016/10/01

webpack 介绍

  • webpack 下载 npm install webpack -g 全局安装webpack
  • webpack官网=>戳我！
  • webpack是现代JavaScript应用程序的模块打包器，他会递归的构建一个依赖关系图，其中包括应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle
  • 它是高度可配置的，但是在开始前需要先理解四个核心概念：
    • 入口(entry) 所有的依赖项
    • 输出(output) 打包后的结果
    • loader：webpack默认只能打包js,如果需要打包其他文件需要使用相应的loder
    • 插件(plugins) 热启动等

webpack 基本使用

首先，我们可以使用vue-cli工具，直接创建项目文件并配置模块，让以下步骤一步完成，但下面步骤可以使我们更好的了解webpack的各项配置

  • 初始化npm，在本地安装webpack

    1
    2
    3
    mkdir webpack-demo && cd webpack-demo
    npm init -y
    npm install --save-dev webpack

  • 其他js模块导出到app.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // add.js
    // 简单演示，这里不处理数据了
    module.exports = {
      add: function (n1, n2) {
        n1 = n1-0
        n2 = n2-0
        return n1 + n2
      }
    }
    // app.js
    const addObj = require('./add')
    // 引入css模块
    // require('../style/main.css');
    require('../style/main.less');
    let btn = document.getElementById('btn');
    btn.onclick = function () {
      let num1 = document.getElementById('num1').value;
      let num2 = document.getElementById('num2').value;
      document.getElementById('num3').value = addObj.add(num1, num2);
    }
1
2
3
4
5
<!-- html -->
<input type="text" id="num1">
<input type="text" id="num2">
<input type="button" id="btn" value="+" >
<input type="text" index="num3">
  • webpack.config.js配置文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    // 引入path模块
    const path = require('path')
    // 自动在output的path目录中生成html文件
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    // 清理指定的文件夹
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    module.exports = {
      entry: './src/app.js',
      output:{
        // 给输出文件一个名字
        filename: 'build.js',
        // 输出文件的路径，路径必须是绝对路径,拼接路径， resolve会处理./
        path: path.resolve(__dirname,'./dist')
      },
      // 当我们需要打包其他资源时候，找到官方文档对应的loader下载并按照说明配置好就可以了
      // 以添加css loader为例 ，npm输入`npm install --save-dev style-loader css-loader` 安装到dev本地开发环境中
      module: {
        rules: [
          {
            test: /\.js$/,
            // 排除文件
            exclude: /(node_modules|bower_components)/,
            use: [{
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }]
          },
          {
            test: /\.css$/,
            // 把css当做模块来处理
            // 执行从右到左
            // autoprefixer-loader  自动给样式属性加前缀
            // css-loader 把css作为模块来处理
            // style-loader 把样式插入到页面的head中
            use: ['style-loader', 'css-loader', 'autoprefixer-loader']  // 执行顺序从右到左
          },
          {
            test: /\.less$/,
            // 处理less
            use: ['style-loader', 'css-loader', 'autoprefixer-loader', 'less-loader']
          },
          {    
            test: /\.scss$/,
            // 处理sass
            use: ['style-loader', 'css-loader', 'autoprefixer-loader', 'sass-loader']
          },
          {
            // 处理图片和字体
            // 当文件小于limit （limit单位是字节）会把文件转换成base64编码的字符串
            // 当文件大于limit 会使用file-loader来处理
            // url-loader 和 file-loader会处理任何类型的文件
            // url-loader 可以把文件转成base64编码的字符串
            test: /\.(png|jpg|gif|woff|woff2|eot|ttf|otf|svg)$/,
            // use: ['url-loader']
            use: [{
              loader: 'url-loader',
              options: {
                limit: 10240
              }
            }]
          }
        ]
      },
      // npm安装，然后在配置文件中引入插件，再在模块配置中进行配置
      plugins: [
        // 引入之后在插件模块中 new一个对象
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
          title: 'Output Management',
          template: 'index.html', // 自动以哪个模板生成文件
          filename: 'index.html'  // 设置生成的html的文件名
        })
      ]
    }

loader:
babel-loader es6语法降级等
安装npm install babel-loader babel-core babel-preset-env webpack 安装到dev中
插件：
CleanWebpackPlugin清理指定文件夹
HtmlWebpackPlugin自动生成html文件
工具：
webpack-dev-server热启动
在package.json中scripts中配置"dev": "webpack-dev-server --inline --hot --open --port 3000" 之后只要在npm中键入npm run dev就可以打开网页并热启动

CATALOG
  1. 1. webpack 介绍
  2. 2. webpack 基本使用
Archive Tag
Total : 17
2016
2015
demo ajax cookie session Canvas git 定时器 js 插件 表单 this hexo 博客 代码风格 jQuery h5 css3 构造函数 artTemplate 跨域 Vue webpack