webpack从零开始

安装

// 全局
npm i webpack webpack-cli -g

// 在项目中安装-推荐
npm i webpack webpack-cli -D

// npm将拒绝安装任何与当前软件包名称相同的软件包, 可加 --force标志覆盖它

使用

webpack4.0+可以实现0配置打包 限制较多, 无法自定义很多配置

// 自动打包, 不需设置, 自动打包根目录下src里面的文件
npx webpack

// 安装插件 Code Runner 运行node环境下的js

npx原理

在 webpack\node_modules\.bin\webpack.cmd 中做判断
去 webpack\node_modules\webpack\bin\webpack.js 执行

demo_01 `src文件夹下` `commonJS规范`

// a.js
console.log('这是a文件')

// commonJS规范
// module.exports = {
//   name: 'a.js',
//   functionA: () => {
//       console.log('这是functionA')
//   }
// }

// ES6规范
export default {
  name: 'a.js',
  functionA: () => {
    console.log('这是functionA')
  }
}

// b.js
console.log('这是b文件')

// let a = require('./a.js')

import a from './a.js'

console.log(a)
a.functionA()

// index.html引入b.js, 报错
// 浏览器无法使用CommonJS导入导出模块

// 打包
npx webpack

// index.html 引入打包后的js文件, 生效

webpack配置

entry: 入口js
output: 输出位置-输出文件名...
loader: 对模块的源代码进行转换
plugins: 插件, 用于解决loader无法实现的其他事

配置webpack.config.js(手动添加到根目录下)
运行npx webpack

// 配置项,默认webpack.config.js
const path = require('path')

module.exports = {
    entry: './src/index.js', // 要打包的文件
    output: {
        // path: path.resolve('./dist'),
        path: path.join(__dirname, './dist'), // 输出到文件夹,2+以后必须使用绝对路径
        filename: 'outputIndex.js' // 输出文件名
    },
    // mode: 'development', // 开发环境, 仅打包不压缩
    mode: 'production', // 默认, 线上, 打包+压缩
    watch: true // 自动编译, 只要做修改就编译
}

// 默认打包
npx webpack

// 指定打包的配置文件
npx webpack --config webpack.config2.js

// 若不想每次都需要指定文件, 可使用npm配置打包的配置文件
// package.json

"scripts": {
    // 自己起个打包用的名字, 将上面命令粘到此处
    "build2": "webpack --config webpack.config2.js"
}

npm run build2

开发时自动编译

不需要每次都要 npx webpack --config... npm run build ...
webpack's Watch Mode
webpack-dev-server
webpack-dev-middleware

watch

// package.json配置
"scripts": {
    "watch2": "webpack --watch" // 字段名是自定义的
}
// 命令
npm run watch2

// 配置文件中 webpack.config.js 添加字段
watch: true
// 命令
npm run build2

webpack-dev-server(推荐)

在内存中生成打包后的js, 保存在根目录下, 专供开发使用, 打包效率高, 自动打包,及刷新浏览器

npm i webpack-dev-server -D 必须依赖webpack, 若没有需安装
在html中引入,此html文件没有热更新, 需要你手动刷新,仅热更新你打包的js等
运行 npx webpack-dev-server
或运行 npx webpack-dev-server --hot --open --port 8090
package.json中配置 "dev2": "webpack-dev-server"
或配置 "dev2": "webpack-dev-server --hot --open --port 8090"
npm run dev

// package.json 配置项相关
"npx webpack-dev-server --comoress --hot --open --port 8090 --contentBase src"

--compress // 压缩
--hot // 热模块更替(只将当前更新的js类似补丁替换上去)
--open // 自动打开
--port 8090 // 设置端口号
--contentBase src // 设置服务默认在src下(的index.html)

也可以在webpack.config.js中直接做配置

"devServer": {
    open: true,
    hot: true,
    port: 8090,
    compress: true,
    contentBase: './src'
}

html插件

npm i html-webpack-plugin -D
在 webpack.config.js 中的 plugins 节点下配置

devServer时, 根据模板在experss根目录下"复制"一份文件(内存中)
自动引入打包的js文件
打包时自动生成一个index.html(自己设置的文件名)

// 根据模板生成一个文件
const HtmlWebpackPlugin = require('html-webpack-plugin')

"plugins": [
    new HtmlWebpackPlugin({
        filename: 'index.html', // 拷贝打包以后的文件, 在根目录下, 存到内存中! 打包以后, 在dist会多一个这个文件, 并且自动引入了js, 不需要手动引入js文件
        template: './src/index.html' // 要复制的文件
    })
]

webpack-dev-middleware

将webpack处理后的文件传递给服务器, webpack-dev-server在内部使用了他

安装 express 和 webpack-dev-middleware

npm i express webpack-dev-middleware -D

新建 server.js

const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack.config.js')

const app = express()
const compile = webpack(config)

app.use(webpackDevMiddleware(compile, {
    publicPath: '/'
}))

app.listen(3000, function () {
    console.log('服务开启了: http://localhost:3000')
})

package.json 配置

"server2": "node server.js"

运行 npm run server2

webpack从零开始

安装

使用

npx原理

demo_01 src文件夹下 commonJS规范

webpack配置

开发时自动编译

demo_01 `src文件夹下` `commonJS规范`