大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

Webpack操作指南

初始化

  1. 创建项目文件夹
    webpack-operate
  2. 创建package.json文件
    webpack-operate npm init
  3. 安装webpack以及webpack-cli
    webpack-operate npm i webpack webpack-cli --save-dev

模块打包

  1. 创建打包配置文件
    webpack.dev.config.js
  2. 创建入口文件
    ./src/index.js
  3. 编辑打包配置文件
module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: './release/bundle.js' 
  }
}
  1. 创建打包命令
    package.json文件
"scripts": {
    "dev": "webpack --config ./webpack.dev.config.js --mode development"
  }
  1. 执行打包命令
    npm run dev
    此时,生成release文件夹,内部有打包后文件bundle.js

模块热更新

  1. 安装依赖
    webpack-operate npm i webpack-dev-server html-webpack-plugin --save-dev
  2. 创建html模板文件
    ./index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Webpack操作指南</title>
</head>
<body>
  <h1>Webpack操作指南</h1>
</body>
</html>
  1. 编辑打包配置文件
    webpack.dev.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'release'),
    filename: 'bundle.js' 
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ],
  devServer: {
    open: true, //浏览器自动打开
    port: 9000
  }
}
  1. 编辑打包命令
    package.json文件
"scripts": {
    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
  },
  1. 执行打包命令
    npm run dev
    此时,浏览器自动打开http://localhost:9000,以./index.html为模板,以./release/bundle.jsJavaScript脚本。且实现热更新(修改 ./src/index.js文件时,浏览器自动刷新)。

开发调试

  1. 编辑打包配置文件
    webpack.dev.config.js
module.exports = {
  //...
  devtool: 'inline-source-map',
  //...
}

代理

  1. 编辑打包配置文件
    webpack.dev.config.js
module.exports = {
  //...
  devServer: {
    open: true, //浏览器自动打开
    port: 9000,
    proxy: {
      '/api/*': {
        target: 'http://localhost:8880'
        //访问hocalhost:9000/api:*时,会被代理到hocalhost:8880/api:*
      }
    }
  }
}

此时,访问hocalhost:9000/api:*时,会被代理到hocalhost:8880/api:*

ES6语法

  1. 安装依赖
    npm install babel-loader@7 babel-core babel-preset-env --save-dev
  2. 编辑打包配置文件
    webpack.dev.config.js
module.exports = {
 // ...
 module: {
    rules: [{
    test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env'],
          plugins: []
        }
      }
    }]
  },
 //...
}

ES7语法

  1. 安装依赖
    npm install babel-preset-stage-0 --save-dev
  2. 编辑打包配置文件
module.exports = {
 // ...
 module: {
    rules: [{
    test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets:  ["env","stage-0"],
          plugins: []
        }
      }
    }]
  },
 //...
}

ES7提案-装饰器

  1. 安装依赖
    npm install babel-plugin-transform-decorators-legacy --save-dev
  2. 编辑打包配置文件
    webpack.dev.config.js
module.exports = {
 // ...
 module: {
    rules: [{
    test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets:  ["env","stage-0"],
          plugins: ["transform-decorators-legacy"]
        }
      }
    }]
  },
 //...
}

第三方库

  1. 安装lodash
    npm install --save lodash
  2. 修改src/index.js文件
import _ from 'lodash'
console.log(_.join(['hello', 'webpack'], '  '))

控制台打印:hello webpack

加载CSS

  1. 安装依赖
    npm install --save-dev style-loader css-loader
  2. 编辑打包配置文件
    webpack.dev.config.js
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
  1. 创建src/style.css文件
body {
  background: #EEE
}
  1. 修改src/index.js文件
import './style.css'

注释:这种方式引入的CSS文件会被style标签包裹并插入到页面head内部

加载图片

  1. 安装依赖
    npm install --save-dev file-loader
  2. 编辑打包配置文件
    webpack.dev.config.js
  module: {
    rules: [{
      test: /\.(png|svg|jpg|gif)$/,
      use: [
        'file-loader'
      ]
    }]
  }
  1. 修改src/index.js文件
var myLogo = new Image()
myLogo.src = Logo
document.body.appendChild(myLogo)

注释:图片资源作为img元素。

  1. 修改src/style.css文件
body {
  background: url('./logo.png')
}

注释:图片资源作为元素背景。

多个输出文件

  1. 创建src/print.js文件
console.log('print')
  1. 修改打包配置文件
    webpack.dev.config.js
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'release')
  }
  1. 执行打包命令
    npm run dev
    webpack打包输出几个bundle文件并不是由模块依赖树决定,而是根据打包配置文件中的output决定。即使src/index.js文件引入了src/print.js文件,仍会将后者打包输出为单独的bundle

清理打包文件

  1. 安装依赖
    npm install clean-webpack-plugin --save-dev
  2. 编辑打包配置文件
    webpack.dev.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  plugins: [
    new CleanWebpackPlugin(['release']),
  ]
}

参考资料

Javascript 设计模式系统讲解与应用
Webpack中文文档