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": []
}