webpack的基本使用
一、webpack的功能
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle
二、使用webpack的流程
(1)初始化项目,生成package.json文件;
npm init
(2)安装webpack需要的包(webpack-cli和webpack);
npm install --save-dev webpack-cli webpack
(3)在package.json中添加执行编译的命令,创建配置文件(webpack.config.js),并配置;
注:此处的“webpack”是“webpack.config.js”配置文件的简写,上下两句含义相同。
(4)打包测试
npm run webpack
三、webpack的核心概念
(1)entry指定入口文件;
(2)output指定输出相关信息;
(3)loader可以帮助webpack处理那些非js文件;
(4)plugins(插件)用于执行范围更广的任务。
(1)entry和output:
单入口:
entry:{
main:'./src/index.js'
}
const path = require('path');
output:{
path:path.resolve(__dirname,'dist'),
filename:'任意.js'
}
多入口:
entry:{
index:'./src/index.js',
search:'./src/search.js'
}
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js'
}
(2)loader
到官网查找loader相关的文档:webpack官网loader部分
例:
module.exports = {
module:{
rules:[
{
test:/.\js$/,
exclude:/node_modules/,
loader:'babel-loader'
}
]
}
}
(3)plugins
学会到官网或其他地方查找相应的plugins文档:
例:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins:[
new HtmlWebpackPlugin({
template:'./index.html'
})
]
}