用webpack构建项目(1)-处理js文件

项目初始化

    mkdir webpack-demo              # 创建项目目录
    cd webpack-demo                 # 进入目录
    npm init -y                     # 初始化 package.json文件
    npm i webpack webpack-cli -D    # 安装 webpack 和 webpack脚手架  

windows系统按住shift键不放，在单击鼠标右键就能看见在当前目录下打开shell/cmd的选项

通过命令行查看当前项目webpack的版本

    ./node_modules/.bin/webpack -v

项目目录结构

    F:\webpack-demo         <!-- 项目名 -->
    ├── dist/               <!-- 打包后生成的目录 -->
    |  └── index.js         <!-- 打包后的文件 -->
    ├── node_modules/       <!-- 项目依赖模块 -->
    ├── package.json        <!-- 初始化的package.json文件 -->
    ├── src/                <!-- 源代码目录 -->
    |  └── index.js         <!-- 要编写的代码 -->
    └── webpack.config.js   <!-- 手动创建webpack的配置文件 -->

配置webpack.config.js

    const path = require("path");

    module.exports = {
        mode:"production",          // 模式(mode):webpack 使用相应模式的内置优化 
        entry: "./src/index.js",    // 入口(entry):webpack打包的入口
        output: {                   // 输出(output):webpack编译打包后的文件输出的位置
            filename: 'main.js',
            path: path.resolve(__dirname, 'dist'),
        },
    };

配置package.json

    "scripts": {
        "build": "webpack --config webpack.config.js"
    },

打包js文件

    npm run build

参考:

https://webpack.docschina.org/
https://www.npmjs.com/package/webpack
https://github.com/webpack
webpack概念；webpack安装；webpack模式；webpack入口；webpack输出；