Webpack 基本设置01

装置设置

• 这里默许已装置了node环境
  搜检node是不是装置敕令 node -v
• 建立项目文件夹
  比方建立以下文件夹 webpack-demo
  

• 建立设置项

  npm init

  或许

  npm init --y

  此时天生package.json文件

• 全局装置webpack和webpack-cli

  npm install webpack webpack-cli -g

• 在项目文件夹中装置webpack和webpack-cli

  npm install webpack webpack-cli --save-dev

• 装置完毕后在编辑器中翻开项目
  
• 翻开pakage.json文件，涌现webpack和webpack-cli的版本号，即示意装置胜利

• 设置临盆和开辟形式
  pakage.json中”scripts”参数示意自定义敕令，这里我们能够增加以下代码:
  

  "dev": "webpack --mode development",
  "build": "webpack --mode production"

• 建立进口文件

  ./src/script/main.js

  

• 在项目途径下建立webpack设置文件，默许不需要设置，这里我们能够自定设置选项
  

  entry示意进口文件的地点；output示意输出信息，个中，path为输出文件的目次地点，假如没有则自动天生（**必需要绝对途径**），filename示意天生的文件名

• 项目文件夹下建立一个dist文件夹，寄存打包后的js文件

• 运转：

  npm run dev 示意开辟形式

  

  打包完成，此时在./dist/js/下天生了一个bundle.js文件

  npm run build 示意临盆形式，此时的main.js 被紧缩

• 建立index.html 引入打包好的bundle.js文件
  
• 在浏览器中翻开index.html文件，翻开控制台:
  

准确无误输出了我们在进口js文件中编写的代码，打包胜利！