webpack—从零开始配置

参考： https://segmentfault.com/a/1190000018534625

一、开启项目：

　　1、项目初始化：

npm init

　　2、安装 webpack模块：

npm install webpack webpack-cli -g //全局安装 （如果项目不使用webpack命令，应该是可以不用全局安装webpack的）
npm install webpack webpack-cli -D //本地安装

　　3、编译打包应用：（webpack 默认就具有一定的编译打包功能的，即在没有 使用webpack配置文件时，也是可以使用的）

• 创建js文件
  • src/js/app.js
• 运行指令：（可以把指令写到package.json里面）
  • 开发配置指令：webpack src/js/app.js -o dist/js/app.js --mode=development
    • 功能: webpack能够编译打包js和json文件，并且能将es6的模块化语法转换成浏览器能识别的语法
  • 生产配置指令：webpack src/js/app.js -o dist/js/app.js --mode=production
    • 生产配置指令：webpack src/js/app.js -o dist/js/app.js --mode=production
• 缺点：（webpack自带编译功能的缺点，未配置其它的插件）
  • 不能编译打包css、img等文件
  • 不能将js的es6基本语法转化为es5以下语法
• 改善：使用webpack配置文件解决，自定义功能

二、使用webpack配置文件（webpack命令会自动根据 webpack.config.js 文件中配置进行去打包）

　　1、不添加其它的编译插件，和上面的 指令启动webpack编译 是一样的。如

const {resolve} = require('path'); //node内置核心模块，用来设置路径。
module.exports = {
  entry: './src/js/app.js',   // 入口文件
  output: {                     // 输出配置
    filename: './js/bundle.js',      // 输出文件名
    path: resolve(__dirname, 'dist')   //输出文件路径配置
  },
  mode: 'development'   //开发环境(二选一)
  mode: 'production'   //生产环境(二选一)
};

　　2、添加 打包less资源 的插件（）