一、安装WebPack

  • 全局安装

npm install webpack@3.6.0 -g

  • 局部安装 —save-dev 添加开发环境依赖

npm install webpack@3.6.0 --save-dev

  • 查看版本

webpack --version

  • 卸载webpack

npm uninstall webpack

二、配置webpack.config.js

  1. //1.导入node的path包获取绝对路径，需要使用npm init初始化node包
  2. const path = require('path')
  4. //2.配置webpack的入口和出口
  5. module.exports = {
  6.   mode:'development',//打包模式 默认为 production（生产环境带压缩）
  7.   entry: './src/main.js',//入口文件
  8.   output:{
  9.     path: path.resolve(__dirname, 'dist'),//动态获取打包后的文件路径,path.resolve拼接路径
  10.     filename: 'bundle.js'//打包后的文件名 bundle[hash:4].js可设置哈希值打包出不同文件版本
  11.   },
  12.   devServer: { //开发时服务器配置
  13.     port: 2555,
  14.     progress: true,
  15.     contentBase: './dist'
  16.   },
  17.   plugins: [
  18.     new htmlWebpackPlugin({
  19.       template: './view/index.html',
  20.       filename: 'index.html'
  21.     })
  22.   ]
  23. }

三、设置package.json映射webpack命令

npm run build 时默认会在本地项目查找，然后在查找全局项目

  1. {
  2.   "name": "webpack1",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.     "private": true,
  6. //  "main": "index.js",
  7.   "scripts": {
  8.     "test": "echo \"Error: no test specified\" && exit 1",
  9.     "build": "webpack" //运行webpack命令
  10.     "dev" : "webpack --config webpack.myconfig.js", //自定义配置文件名称
  11.     "server" : "webpack-dev-server" //本地服务器
  12.   },
  13.   "author": "",
  14.   "license": "ISC",
  15.   "dependencies": {
  17.   }
  18. }

"private": true 确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。
"build": "webpack" 运行webpack命令
"dev" : "webpack --config webpack.myconfig.js" 自定义配置文件名称