前端资源模块化管理和打包工具 代码分隔按需加载=>loader转换 >>grunt gulp browerify 处理依赖关系和加载顺序
lodash>>understore>>backbone 方法库
1.webpack-dev-server易于部署的开发服务器 webpack-dev-server --open=="scripts": {"start": "webpack-dev-server"}
进度条命令 webpack --progress --watch
2.webpack.config.js配置文件
const config={
// 入口entry: string|Array<string> entry:''||[]
// 对象语法
// 单个属性入口
entry:{
main:''
}
// 可扩展的配置
entry:{
app:'./src/app.js',// 应用程序入口
vendors:'./src/vendors.js' // 公共库入口
}
// 输出
output:{
filename:'bundle.js',
path:__dirname+'/build' path.resolve(__dirname,'build')
// 写入到./build/bundle.js
}
// 替换
[id] [name] [hash] [chunkhash]
// 加载器loader css/ts-loader
module:{
rules: [
{test: /\.css$/, use: ['css-loader'](/loaders/css-loader)},
{test: /\.ts$/, use: ['ts-loader'](https://github.com/TypeStrong/ts-loader)}
]
==>等价于
{test: /\.css$/, [loader](/configuration/module#rule-loader): 'css-loader'}
// or equivalently
{test: /\.css$/, [use](/configuration/module#rule-use): 'css-loader'}
// or equivalently
{test: /\.css$/, [use](/configuration/module#rule-use): {
loader: 'css-loader',
options: {}
}}
}
// 使用loader的三种方式
1.简明方式
module: {
rules: [
{
test: /\.css$/,
// loaders:['style-loader','css-loader']
use: [
{ loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
2.require使用!分隔
require('style-loader!css-loader?modules!./styles.css');
3.命令行接口cli
webpack --module-bind jade --module-bind 'css=style!css'
这会对 .jade 文件使用 jade-loader,对 .css 文件使用 style-loader 和 css-loader。
// 插件plugins 需要new实例
// 构建目标target hmr重载热更新
// 处理自动补全后缀
resolve: {
modules: [path.resolve(__dirname, "common"), path.resolve(__dirname, "util"), "node_modules"],
extensions: [".js", ".json", ".jsx"],
mainFiles: ["index"]
},
}
module.exports=config
node js commonjs模块 全局安装webpack会锁定版本
npm 标准配置打包
"scripts": {
"build": "webpack --config webpack.config.js"
}
webpack // 最基本的启动webpack的方法
webpack -w // 提供watch方法;实时进行打包更新
webpack -p // 对打包后的文件进行压缩
webpack -d // 提供source map,方便调式代码
整体的搭建依赖于已存在
如果依赖不存在,或者引入顺序错误,应用程序将功能异常。
如果引入依赖但是并没有使用,那样就会存在许多浏览器下载好却无用的代码。
代码分离对应不同的bundle
ExtractTextWebpackPlugin来分离css。webpack -p