持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

webpack3.0 （5.0之前版本）

一、概念

模块打包器：本身指加载js/json loader：本身运行在nodeJs环境中的javascript

入口（entry），输出（output），loader，插件（plugins）

二、安装

// 全局安装 npm install webpack -g

// 局部安装 npm install webpack --save-dev

三、编译打包应用

创建入口文件：src/js/ : entry.js

编译命令：webpack 打包文件路径输出文件路径

配置编译文件webpack.config.js：

文档 ``

配置自动化打包： npm install --save-dev webpack-dev-server

const path = require('path');

module.exports = {
  entry: './src/js/entry.js', // 入口文件地址
  output: {
    path: path.resolve(__dirname, 'dist'),// 输出文件地址
    filename: 'bundle.js',// 输出文件名称
  },
};

四、打包css和图片,文件

安装css,style loader：npm install css-loader style-loader --save-dev

安装文件,路径 loader：npm install file-loader url-loader --save-dev

五、webpack命令

webpack --help

1.webpack入口起点文件

例子：index.js

webpack4.0

运行指令：开发环境：webpack ./src/index.js -o ./build/built.js --mode=development webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 整体打包环境，是开发环境生产环境：webpack ./src/index.js -o ./build/built.js --mode=production webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 整体打包环境，是生产环境
1. 结论：
2. webpack能处理js/json资源，不能处理css/img等其他资源
3. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~
4. 生产环境比开发环境多一个压缩js代码。 ` Version:0.9 StartHTML:0000000105 EndHTML:0000007888 StartFragment:0000000141 EndFragment:0000007848

const { resolve } = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: {

// 文件名称（指定名称+目录）

filename: 'js/[name].js',

// 输出文件目录（将来所有资源输出的公共目录）

path: resolve(__dirname, 'build'),

// 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'

publicPath: '/',

chunkFilename: 'js/[name]_chunk.js', // 非入口 chunk 的名称

// library: '[name]', // 整个库向外暴露的变量名

// libraryTarget: 'window' // 变量名添加到哪个上 browser

// libraryTarget: 'global' // 变量名添加到哪个上 node

// libraryTarget: 'commonjs'

plugins: [new HtmlWebpackPlugin()],

mode: 'development'

}; `

webpack3.0 （5.0之前版本）+webpack4.0