webpack安装

一、初识webpack

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

Webpack4相比之前的版本，速度更快，大型项目节约90%构建时间，内置了更多默认配置，变更了许多API。
提升打包速度有两点：1.保证node.js版本尽量新；2.保证webpack版本尽量的新。

不推荐全局安装webpack，假如我有两个项目都用webpack打包，如果全局安装webpack，那它的版本号是固定的。假设我一个项目是通过webpack3.0进行配置的，另一个项目是通过webpack4.0进行配置的，如果全局安装4.0的话，那3.0这个项目是跑不起来的。假设3.0和4.0这两个项目是有依赖的，那么通过全局安装webpack这种方式是不可能运行起来的。

1	npm run bundle //打包命令

二、安装

新建一个文件夹“test”，在命令提示符中进入到该文件夹；
$npm init
打开package.json，删除main对应的配置项去掉并增加配置项private为true，script对象置为空

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "script":{
        "test":"echo \"Error:no test...."
    },
    "author": "",
    "license": "ISC",
}

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "script": {},
    "author": "",
    "license": "ISC",
}

全局安装：
1
npm install webpack webpack-cli -g

局部安装：进入项目文件夹

1 2	npm install webpack-cli --save-dev npm install webpack --save-dev

局部安装的webpack查找版本号是找不到的，因为node会从全局找。所以可以用npx来找：npx webpack -v
安装制定版本：

1	npm install webpack@4.41.0 webpack-cli -D

三、入口文件

在webpack.config.js文件中：

const path = require("path");
modele.exports = {
    mode: "production",
    entry:{
        main:"./src/index.js"
    },
    output:{
        filename:"bundle.js",
        path:path.resolve(_dirname,"dist")
    }
}