Webpack4的安装与使用

一、安装node

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

node -v

二、全局安装webpack

为了方便使用，咱们能够先安装一个全局的webpack，因为webpack4.0开始须要依赖webpack-cli，因此咱们能够一块儿安装了，其中-D是全局安装的意思

npm install webpack webpack-cli -D

查看是否成功

webpack -v

三、局部安装

缘由不用我说了，官方已经说明了，全局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文件

四、webpack的配置

因为webpack更新4.0后，不少要求的变严格了，若是你不配置的话，不但会影响打包速度，而已会不断的输出提示。
建立一个webpack.config.js

module.exports = {
    //打包模式，必定要配置，否则打包速度慢不少
    mode:'development',//开发模式
    // mode:'production',//开发模式

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

五、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