webpack基础

安装

npm install -g webpack webpack-cli

快速开始

最新的 webpack 支持零配置使用，默认入口为当前目录下的 src 中的 index.js 文件，默认打包输出的目录为 dist 目录，默认打包模式 mode 为 development

1. 先建一个文件夹，如 webpack-test
2. webpack-test 文件下新建一个 src 目录，再 src 下新建一个 index.js 文件
3. 终端进入 webpack-test 目录，运行 webpack
4. webpack 会在 webpack-test 目录下生成一个 dist 目录。

配置项说明

在 webpack-test 目录下新建一个 webpack.config.js ，返回的是一个配置对象。

entry 配置入口文件

在 src 目录下新建 a.js ， b.js

// 单一入口
module.exports = {
  entry:'./src/a.js'
}

// 多入口
module.exports = {
  entry:{
    a:'./src/a.js',
    b:'./src/b.js'
  }
}

在多入口时，会在 dist 目录下打包 a.js 和 b.js

output

• filename 打包之后的文件夹名

// 单入口情景
module.exports = {
  entry:'./src/a.js',
  output:{
    filename:'[name].[hash:7].js'
  }
}

// 打包后类似 main.abdfa13.js

// 多入口情景
module.exports = {
  entry:{
    a:'./src/a.js',
    b:'./src/b.js'
  },
  output:{
    filename:'[name].[hash:7].js'
  }
}

// 打包后生成类似 a.abdfa13.js , b.abdfa13.js

在配置文件中，有几个可用的参数，如 hash 当前打包随机字符串， name 对应 entry 中的属性名（但单入口默认为 main ）， ext 对应 loader 中的文件后缀名。

• path 打包生成的目标文件夹，必须为一个绝对地址

const path = require('path');

module.exports = {
    entry:'./src/a.js',
  output:{
    filename:'[name].[hash:7].js',
    path:path.resolve(__dirname,'./dist')
  }
}

• publicPath，针对打包后的项目不在服务器的根目录访问，需要加上路径的情况。保证资源访问地址正确。主要体现在页面中引用绝对地址的图片，和 webpackPlugin 注入资源地址的时候。

比如最后项目访问路径为： https://haokur.com/webpack-test/index.html ，则需要配置

const path = require('path');

module.exports = {
    entry:'./src/a.js',
  output:{
    filename:'[name][hash:7].js',
    path:path.resolve(__dirname,'./dist/webpack-test'),
    publicPath:'/webpack-test/'
  }
}

发布时，则可以将 dist 下面的 webpack-test 目录部署到服务器的根目录下面。

未完待续