entry : 入口文件 ;
externals : 外部依赖的声明;
output : 目标文件,通过webpack打包后的文件存放地址;
resolve : 配置别名;
module : 各种文件,各种loader;
plugins : 引用的插件
webpack loaders
html :html-webpack-plugin / html-loader
js :babel-loader + babel-preset-es2015
css :style-loader + css-loader
imgage + font : url-loader
webpack 常用命令
webpack 调试打包,测试打包
webpack -p 线上打包(最小化压缩)
webpack --watch 监听文件的改变,自动编译,用于开发过程
webpack-dev-server
前端服务器
可以在文件改变时,自动刷新浏览器
配置 : webpack-dev-server/client?http://localhost:8088
使用 :webpack-dev-server --port 8088 --inline
webpack.config.js配置
单入口配置(单页应用) ——> entry : "入口文件路径"
多入口配置 (多页应用) ——> entry : {
"index" : [ "index入口文件路径" ],
"login" : [ "login入口文件路径" ],
}
webpack 打包成独立的文件 ——> output : {
path : path.resolve( _dirname , "./dist" ),
filename : "js/[name].js"
}
jquery的引用 : externals : {
"jquery" : "window.jQuery"
}
提取通用模块 :