安装webpack4.0

全局安装webpack 和webpack-cli ，为什么4.0要安装webpack-cli

因为在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。

npm install wepack webpack-cil -g

全局卸载webpack

npm uninstall webpack webpack-cli -g

局部安装webpack

npm install webpack webpack-cli -D等价于 npm install webapck webpack-cli --save-dev

查看局部安装的webpack版本

npx webapck -v

npm v5.2.0 引入的一条命令（npx），npx 会帮你执行依赖包里的二进制文件。引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验

比如我这台电脑全局安装的webpack是3.0+的，局部安装的是webpack4.0+的，我如果在项目目录使用webapck-v的话查看的是全局的webapck版本，而且你如果直接使用webpack命令也是全局的，使用当前目录安装的webapck 就需要使用npx

webpack简单打包

 npx webpack index.js

自定义运行webapck打包命令 也就是运行 npx webapck index.js

在package.json的scripts中配置：

{
"name": "lesson",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start":"webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"
}
}

然后执行npm run start 相当于执行了 npx webapck index.js

如果你需要自定义配置项，在当前目录下创建webpack.config.js文件

const path = require('path');
module.exports = {
    //打包模式
    mode:'development',
    //打包那个文件
    entry: {
    main:'./src/index.js'
    },
    //打包到哪里
    output: {
    //打包后的文件名字
    filename: 'main.js',
    //path打包到那个文件中 这是使用了node的path模块，因为打包路径需要绝对路径
    path: path.resolve(__dirname, 'dist'),
    }
}

mode两个值 production和development

development不会压缩文件