Webpack4的安装与使用

1、安装node

因为webpack是基于node环境下运行的，所以我们首先要安装node
官网：https://nodejs.org/en/
安装完成后查看

node -v

2、全局安装webpack

为了方便使用，我们可以先安装一个全局的webpack，由于webpack4.0开始需要依赖webpack-cli，所以我们可以一起安装了，其中-D是全局安装的意思

npm install webpack webpack-cli -D

查看是否成功

webpack -v

3、局部安装

原因不用我说了，官方已经说明了，全局webpack这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
所以我们需要在项目中安装局部webpack

首先我们初始化一下！！！记住，我们每一个项目一开始都需要初始化！！！

npm init -y

然后我们会看到项目根目录下多了一个package.json文件，里面存储着我们项目所使用的各个包的版本

然后安装webpack

npm install --save-dev webpack  
npm install --save-dev webpack-cli

然后webpack会安装到我们的项目根目录下，同时会多了一个package-lock.json文件

4、webpack的配置

由于webpack更新4.0后，很多要求的变严格了，如果你不配置的话，不但会影响打包速度，而已会不断的输出提示。
创建一个webpack.config.js

module.exports = {
    //打包模式，一定要配置，不然打包速度慢很多
    mode:'development',//开发模式
    // mode:'production',//开发模式

    //入口
    entry:{
        "main":"./main.js"
    },
    // 出口
    output:{
        filename:'./build.js'
    },
    // 监听文件改动，自动打包
    watch: true,
}

5、webpack使用

打包命令一（没有配置的时候）

webpack main.js --output-filename bundle.js --output-path . --mode development

简写

webpack main.js -o bundle.js --mode development

打包命令二（配置了packkage的scripts）

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": " webpack main.js --output-filename build.js --output-path . --mode development"
  },

打包

npm run buidl（你配置什么名字就打什么名字）

打包命令三（配置了webpack.config.js）

打包

webpack

PS

使用编辑器终端的同学注意了，由于node的默认安全机制，它可能会阻止编辑器的终端执行脚本，因此可能会出现cmd可以查看webpack版本和正常使用webpack，而编辑器终端则会报错。
因此我们需要改变node的默认安全机制
首先查看是否为默认

get-executionpolicy

修改

set-executionpolicy remotesigned