webpack二刷笔记(1)创建项目并配置

查看node的版本

    node -v

查看npm的版本

    npm -v

创建项目目录并初始化项目

    mkdir projectName   # 创建项目名
    cd projectName      # 进入项目
    npm init -y         # 初始化配置文件 package.json

安装webpack webpack-cli

    cnpm i webpack webpack-cli -D 
    cnpm i webpack@next webpack-cli@next -D  # 安装webpack下一版本
    # cnpm install webpack --save-dev
    # i 是 install 的缩写
    # -D 是 --save-dev 的缩写 表示开发依赖(只在开发环境下生效，打包后就没用了)，相应模块在`devDependencies`里配置
    # -S 是 --save 的缩写 表示生产依赖，是会打包进生成文件里的模块，相应模块在`dependencies`里配置

查看webpack的版本

    ./node_modules/.bin/webpack -v

运行webpack

    ./node_modules/.bin/webpack  # 不指定配置文件直接使用默认配置打包
    webpack-cli --entry ./src/main.js --output ./dist/app.js  # 使用脚手架打包 entry 指定入口文件为src文件件下的main.js文件。出口为 ./dist/app.js

配置 package.json 运行 webpack

# package.json
    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": "webpack --webpack.config.js"  
    }

通过 npm run build 运行webpack,在项目中安装webpack模块会在 ./node_modules/.bin/ 目录下创建软链接，全局安装webpack则没有效果，
--webpack.config.js 表示加载webpack的配置文件。配置文件放在根目录下。

项目结构

    project                 # 项目名
    |   package.json        # 项目依赖管理配置文件
    |   webpack.config.js   # webpack配置文件
    |   
    +---node_modules        # 下载的依赖模块
    ---src
            index.js        # webpack打包的入口文件

\ webpack.config.js
    "use strict";

    const path = require("path");

    module.exports = {
        mode:"development",                   // 开发模式
        entry: "./src/index.js",              // 指定入口文件
        output:{                              // 打包输出配置
            path:path.join(__dirname,"dist"), // 打包后文件输出目录
            filename:"bundle.js"              // 指定打包后文件名
        }
    }