webpack—从零开始配置

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

一、开启项目：

　　1、项目初始化：

npm init -y

　　2、安装 webpack模块：

npm install webpack webpack-cli -D //本地安装, 现在有 npx 命令，都不需要全局安装webpack了

　　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、webpack默认不支持的文件，需要webpack打包进去，必须要使用相应的插件。（webpack  本身支持  打包的文件，应该只有js文件吧）

 

三、项目中导入模块

　　1、webpack打包只会从入口文件 开始，根据依赖关系 ，把相关的代码进行打包在一起。所以相关的模块必须引入到依赖关系中。如，执行某个js文件前，需要先执行jQuery.js

　　　import './jquery'

　　2、图片  等文件,相应模块的插件安装好。同样的方法导入文件就可以了。

 

 

 

 

 

---

webpack 中 实用的一些API：

一、index.html 中使用的 API：https://blog.csdn.net/xiaomogg/article/details/102549753

 

二、项目 js文件 中使用的 API：

　　1、require.context 【自动化导入模块】：https://www.jianshu.com/p/c894ea00dfec

　　　  说明：用来实现自动化导入模块。一个文件夹下引入很多模块的情况，使用这个就不需要自己每个导入了【AntDesign Pro中就是这么使用的】。

　　　  用例：mock、vuex 等 这些的 模块 一般都是放在一个 目录下的。使用这个API，只要目录有这个文件，就会自动导入进去。

const files = require.context('.', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  if (key === './index.js') return
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default modules

　　2、