首先配置webpack的基本配置,包括entry( 入口)、output(出口):
(创建webpack.config.js文件放置所有的webpack的配置)
接下来是配置命令:
module.exports={
entry:"",
output:{
path:"",(写绝对路径,打包后的输出文件,一般通过node的path以及path.resolve的拼接函数,进行动态获取)
filename:""
}
}
然后提到的是如何将npm run XXX命令与webpack命令形成映射?
在package.json文件中的script下对应添加
"scripts":{
“build”:"webpack",
}
类似的代码就行了
下面是webpack如何对css文件进行处理?
(webpack的扩展处理都是通过安装对应的loader进行的)
处理css需要的loader为:css-loader、style-loader
利用npm进行下载上述loader
安装完,便进行配置,处理css需要的webpack配置为:
在module下添加相应的rules
module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]
(从右向左依次编译,所以顺序可不能乱放) } ] }
所有你所需要的loader以及配置都可以在这里找到:https://www.webpackjs.com/loaders/css-loader/#%E7%94%A8%E6%B3%95
接下来是对less文件的处理
处理less需要的loader为:less-loader、less
配置:略
接下来是对图片文件的处理
处理图片文件需要的loader为:url-loader、file-loader
当文件的大小小于默认配置option中的8196:=8kb时,图片文件会被url-loader编译成为base64存储,大于默认大小limit,便通过file-loader处理,不会编译成为base64存储,而是直接通过hash算法更改文件名,存储到出口文件。
配置:略
接下来是对es6文件的处理
处理less需要的loader为:babel-loader
配置:略
接下来是对vue文件的处理
需要在webpack中集成vue.js
利用npm安装npm i vue --save
vue在构建发布版本的时候,发布两个版本
1.runtime-only 代码中不可以有任何Template
2.runtime-compiler 代码中可以有Template
可以在webpack配置文件中,配置成为版本runtime-compiler
resolve:{ alias:{ "vue$":"vue/dist/vue.esm.js" } }