webpack构建项目（二）打包实战

1.准备工作

1.1初始化package.json

npm init

1.2下载命令行工具

npm install webpack webpack-cli -g

npm install webpack webpack-cli -D

1.3 创建文件

1 ) build文件夹
2 ) src文件夹：创建入口文件 index.js
3 ）package.json配置webpack

“dev”: “webpack-dev-server” // script节点下的脚本，可以通过 npm run 执行

1.3.1 开发环境的打包

①打包命令

webpack --entry ./src/index.js -o ./build --mode=development

以 ./src/index.js 为入口文件开始打包。
打包后输出到 ./build/built.js。
整体打包环境是 开发环境。

②自动打包 (默认打包src下的index到dist文件夹下的main.js)

npx webpack --mode=development

1.3.2 生产环境的打包

webpack --entry ./src/index.js -o ./build --mode=production

1.3.3 注意

1 ）webpack 只能处理 js/json 资源，不能处理 css、img 等其他资源。

2 ）生产环境和开发环境将 ES6 模块化编译成浏览器能识别的模块化，但是不能处理 ES6 的基本语法转化为 ES5（需要借助 loader）。

3 ）生产环境比开发环境多一个压缩 js 代码。

2.配置基本打包

2.1 更改package.json中配置

① 运行 npm install webpack-dev-server -D 安装支持项目自动打包的工具

(可以自动打开浏览器)

// --open 打包完成自动打开浏览器页面
// --host 配置ip地址
// --port 配置端口

"scripts": { "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888 },

2.2 配置webpack.config.js

2.2.1根目录创建文件 webpack.config.js

先给出 webpack.config.js 的大体框架如下，接下来，一步一步配置。

const {
    resolve } = require('path'); // node 内置核心模块，用来处理路径问题

module.exports = {
   
    // webpack配置
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
   
        // 输出文件名
        filename: './built.js',
        // 输出路径
        // __dirname nodjs的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'bulid')
    },
    // loader 的配置
    module: {
   
        rules: [
            // 详细loader配置
        ]    
    },
    // plugins的配置
    plugins: [
        // 详细plugins的配置
    ],
    // 模式
    mode: 'development',
    // mode: 'production'

}

module.exports = { mode: 'development' }

2.2.2 配置打包入口和输出出口