webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
对前端来说，webpack的理解就是：webpack是从入口文件开始，经过模块依赖加载/分析/打包三个流程完成项目构建。
相对对比grunt，gulp等构建工具的打包思路则是：遍历源文件 匹配规则 打包。这个流程种做不到按需加载。
如何使用：
- 新建文件夹npm init 初始化文件。
- 安装webpack
npm install webpack webpack-cli --save-dev
3.在当前文件夹内新建webpack.dev.config.js文件。
module.exports = { entry: './src/index.js', // 主文件地址 output: { path: __dirname, // 当前路径 filename: './release/bundle.js' // 输出地址 }
4. 修改package.js
"scripts": { "dev": "webpack --config ./webpack.dev.config.js --mode development", },
5. 安装其他依赖
npm install webpack-dev-server html-webpack-plugin --save-dev
6. webpack 配置
const path = require("path") const HtmlwebpackPlugin = require("html-webpack-plugin") plugins:[ new HtmlWebpackPlugin({ template: './index.html' }) ], // 设定运行根目录 devServer:{ contentBase:path.join(_dirname,'./release'), open:true, // 自动打开游览器 prot:9000 监听9000端口 }
7. 修改启动命令
"scripts": { "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development", },
8. 安装编译打包插件
yarn add babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev
"dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-polyfill": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-latest": "^6.24.1", "html-webpack-plugin": "^3.2.0", "webpack": "^4.8.3", "webpack-cli": "^3.1.1", "webpack-dev-server": "^3.1.4" }
9. 配置es6 转换插件
module: { rules: [{ // 检测es6转化为es5 test: /\.js?$/, exclude: /(node_modules)/, // 忽略 loader: 'babel-loader' // 使用babel-loader }] }
10. 主目录下增加.babelrc文件 配置babel配置
{ "presets": [ "es2015", "latest" ], "plugins": [] }
