学习搭建项目流程记录（二）
其他loader
一般来说, 一个前端项目除了 js 文件外, 还有一些常用的文件, 如
- 图片文件
- css 文件
对于这些文件, webpack 都不会打包, 需要我们安装对应的 loader 帮助 webpack 打包
打包图片文件
使用插件file-loader来打包图片文件
安装
npm install -D file-loader
- 然后在App.vue导入一张照片
- 到webpack.config.js配置一下
const path = require('path')
// 导入loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 模式
mode: 'development',
// 打包的入口
entry: './src/main.js',
// 打包的出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// loader插件配置
module: {
rules: [
// 配置解析vue文件
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'file-loader',
options: {
// 正常打包后，会把匹配到图片文件复制到dist下，并且以他的hash值作为名字，可使用占位符改变名字
name: '[name].[ext]' // 占位符：[name]表示使用源文件名，[ext]使用原来扩展名
}
},
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 2048 // limit: 当文件小于 2048byte 时, 以 base64 打包到 js 中, 当文件大于 2048byte 时, 使用 file-loader 打包
}
}
]
},
plugins: [
// 一定要引入此插件
new VueLoaderPlugin()
],
// 使用别名
// 作用就是：webpack打包会生成三个文件
/*
runtime only 的文件 vue.common.js
compiler only 的文件 compiler.js
runtime + compiler 的文件 vue.js
*/
// 而默认导出的是 vue.common.js,正常是 runtime + compiler 的文件 vue.js ，下面就是解决办法
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
}
url-loader: 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
- 所以我们安装一下，为了尽量优化项目，配置信息在上面代码，由于 url-loader 依赖 file-loader, 因此安装 url-loader 需要先安装 file-loader, 一般来说执行如下命令更适合
npm install -D file-loader url-loader
打包css
分别用到css-loader和style-loader
- css-loader: 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件
- style-loader: 将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中
比如在项目中css之间互相引用，css-loader 为分析 css 文件之间的引用关系, 最终形成一个整体文件，再通过 style-loader 将 css-loader 的内容挂载到页面的 head 的 style 标签中 - 在app.vue文件中导入css文件后
const path = require('path')
// 导入loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 模式
mode: 'development',
// 打包的入口
entry: './src/main.js',
// 打包的出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// loader插件配置
module: {
rules: [
// 配置解析vue文件
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'file-loader',
options: {
// 正常打包后，会把匹配到图片文件复制到dist下，并且以他的hash值作为名字，可使用占位符改变名字
name: '[name].[ext]' // 占位符：[name]表示使用源文件名，[ext]使用原来扩展名
}
},
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 2048 // limit: 当文件小于 2048byte 时, 以 base64 打包到 js 中, 当文件大于 2048byte 时, 使用 file-loader 打包
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // 执行顺序是从右到左， 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件，将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中
}
]
},
plugins: [
// 一定要引入此插件
new VueLoaderPlugin()
],
// 使用别名
// 作用就是：webpack打包会生成三个文件
/*
runtime only 的文件 vue.common.js
compiler only 的文件 compiler.js
runtime + compiler 的文件 vue.js
*/
// 而默认导出的是 vue.common.js,正常是 runtime + compiler 的文件 vue.js ，下面就是解决办法
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
}
打包stylus
- stylus: 是 stylus 文件预处理程序, 作用是将 stylus 编译成 css 格式
- stylus-loader: 加载 stylus 文件, 调用 stylus 预处理程序形成 css 文件
npm install -D stylus stylus-loader
const path = require('path')
// 导入loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 模式
mode: 'development',
// 打包的入口
entry: './src/main.js',
// 打包的出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// loader插件配置
module: {
rules: [
// 配置解析vue文件
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'file-loader',
options: {
// 正常打包后，会把匹配到图片文件复制到dist下，并且以他的hash值作为名字，可使用占位符改变名字
name: '[name].[ext]', // 占位符：[name]表示使用源文件名，[ext]使用原来扩展名
// limit:2048 // 当文件小于 2048byte 时, 以 base64 打包到 js 中, 当文件大于 2048byte 时, 使用 file-loader 打包
}
},
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 2048
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // 执行顺序是从右到左， 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件，将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中
},
{
test: /\.styl(us)?$/,
use: ['style-loader', 'css-loader', 'stylus-loader']
}
]
},
plugins: [
// 一定要引入此插件
new VueLoaderPlugin()
],
// 使用别名
// 作用就是：webpack打包会生成三个文件
/*
runtime only 的文件 vue.common.js
compiler only 的文件 compiler.js
runtime + compiler 的文件 vue.js
*/
// 而默认导出的是 vue.common.js,正常是 runtime + compiler 的文件 vue.js ，下面就是解决办法
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
}
处理 vue 文件中的 stylus
- vue-style-loader: 是 vue-loader 自带的 style-loader, 在 style-loader 的基础上, 还可以处理 vue 文件中的样式
const path = require('path')
// 导入loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 模式
mode: 'development',
// 打包的入口
entry: './src/main.js',
// 打包的出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// loader插件配置
module: {
rules: [
// 配置解析vue文件
{
test: /\.vue$/,
loader: 'vue-loader'
},
// {
// test: /\.(jpg|jpeg|png|svg)$/,
// loader: 'file-loader',
// options: { // 正常打包后，会把匹配到图片文件复制到dist下，并且以他的hash值作为名字，可使用占位符改变名字
// name: '[name].[ext]', // 占位符：[name]表示使用源文件名，[ext]使用原来扩展名
// // limit:2048 // 当文件小于 2048byte 时, 以 base64 打包到 js 中, 当文件大于 2048byte 时, 使用 file-loader 打包
// }
// },
// 上下两个好像不可以同时存在
{
test: /\.(jpg|jpeg|png|svg|gif)$/,
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 2048
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // 执行顺序是从右到左， 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件，将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中
},
{
test: /\.styl(us)?$/,
use: ['style-loader', 'css-loader', 'stylus-loader']
},
// 处理vue文件中的style,其实也是只使用上面这里就可以了
// {
// test: /\.styl(us)?$/,
// use: ['vue-style-loader', 'css-loader', 'stylus-loader']
// }
]
},
plugins: [
// 一定要引入此插件
new VueLoaderPlugin()
],
// 使用别名
// 作用就是：webpack打包会生成三个文件
/*
runtime only 的文件 vue.common.js
compiler only 的文件 compiler.js
runtime + compiler 的文件 vue.js
*/
// 而默认导出的是 vue.common.js,正常是 runtime + compiler 的文件 vue.js ，下面就是解决办法
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
}
html-webpack-plugin插件的使用
这个插件就是用来生成index.html到dist里面的
// 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
// 一定要引入此插件
new VueLoaderPlugin(),
// 使用并且以src里面的index作为模板才行，相当于复制一个
new HtmlWebpackPlugin({
template: './src/index.html'
})
],