webpack集成vue版本
1.使用到的包：
// 用到的包下载命令：
// npm install --save-dev style-loader css-loader //加载css
// npm install --save-dev less less-loader //加载less
// npm install sass-loader node-sass webpack --save-dev //加载scss
// npm install --save-dev file-loader //加载文件（图片）
// npm install extract-text-webpack-plugin@next --save-dev 提取css
// npm install --save-dev html-webpack-plugin //生成html模板
// npm install --save-dev clean-webpack-plugin //打包前清除dist包
// npm install --save-dev webpack-dev-server //安装webpack开发服务器
// npm install --save-dev webpack-merge //合并webpack配置
// npm install -D vue-loader vue-template-compiler vue-style-loader //安装 vue-loader
// npm install vue --save-dev //vue使用webpack时的依赖
// npm install vue-router --save //vue使用路由
2.webpack.base.js:
// 引入node核心包
const path = require("path");
// 引入插件（提取css/生成html模板/清除dist包）
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入 vue 专用插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 文件入口
entry:'./src/index.js',
// 打包输出
output:{
filename:'bundle.js',// 默认打包后的文件名 bundle.js
// 注意此处输出目录是父级文件夹
path:path.resolve(__dirname,'../dist')// 默认打包后的文件目录 dist
},
// 配置对路径解析快捷方式
resolve:{
// 提供别名(快捷方式)，方便查找模块的路径
// 避免长串的 ../../../的组合
// alias 快捷方式 key:value 的形式声明 快捷方式和对应的目录
alias:{
'@':path.resolve(__dirname, "../src")
},
// extensions 指后缀数组, 当你引入一个文件, 又没有写后缀的时候,
// webpack 会自动尝试在这个配置中找到存在的文件
// 忽略扩展名, 希望在写代码的时候可以省略某些常用扩展名
extensions: [".js",".vue"]
},
// 模块加载器
module:{
rules:[
{
test:/\.vue$/,
loader: 'vue-loader'
},
{
// test 指定匹配的文件名, 使用正则表达式
test: /\.css$/,// 匹配css扩展名文件
// use 指定这类型文件应该调用的加载器
use: ExtractTextPlugin.extract({// 提取css
fallback: 'vue-style-loader',
use: ['css-loader']
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({//提取less
fallback: "style-loader",
use: ["css-loader", "less-loader"]
})
},
{
test: /\.(png|svg|jpg|gif)$/,// 匹配图片文件
use: [
{
loader: "file-loader",
options: {
publicPath: "./images/", // 引入图片时会在路径前面加上该选项
outputPath: "images" // 输出到dist下的images目录
}
}
]
}
]
},
// 插件
plugins: [
// 提取css样式到单独文件
new ExtractTextPlugin("style/style.css"),
// 自动生成index.html到dist
new HtmlWebpackPlugin({
template: "public/index.html"
}),
new VueLoaderPlugin()
]
}
3.webpack.dev.js
通过merge将webpack.base.js（基础配置）与开发配置或生产配置合并
const merge = require('webpack-merge');
const base = require('./webpack.base.js');
const { stats } = require('./webpack.prod.js');
module.exports = merge(base, {
mode: "development",
// 生成map映射文件 帮助开发时能具体的定位到异常代码行
devtool: "source-map",
// 开发服务器配置
devServer: {
port: 8000, // 默认端口是8080,
stats:'errors-only' //开发服务器只打印错误
},
})
stats的选项：
| Preset | Alternative | Description |
| errors-only | none | 只在产生error时打印日志 |
| minimal | none | 只打印errors或文件第一次被编译时 |
| none | false | 禁止打印日志 |
| normal | true | 标准打印日志 |
| verbose | none | 打印所有日志 |
4.webpack.prod.js
const merge = require('webpack-merge');
const base = require('./webpack.base.js');
// 引入打包前清除dist包插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = merge(base, {
mode: "production",
plugins:[
// 每次构建前清除dist目录
new CleanWebpackPlugin(),
]
})
5.打包命令配置（package.json中配置）
"scripts": {
"test": "webpack -v",
"dev": "webpack-dev-server --config ./config/webpack.dev.js --open",
"build": "webpack --config ./config/webpack.prod.js"
},
webpack相关配置了解
1.安装webpack
当得到版本意味着安装成功
//1.初始化项目
npm init
//2.在项目目录下安装webpack（不推荐全局安装）
npm install --save-dev webpack webpack-cli
//3.在生成的配置文件package.js中配置scripts
//非全局安装不可直接在终端使用webpack -v命令，不起作用
//通过执行npm run test来获取webpack的版本
"scripts": {
"test": "webpack -v"
}
注意：
-
--save / -S 作为生产环境依赖 会被记录到 package.json 的 dependencies 里面
-
--save-dev / -D 作为开发环境依赖 记录到 package.json 的 devDependencies 里面
-
-g 全局安装 装到计算机系统路径里面
webpack简单使用
1.配置webpack.config.js文件（项目根目录）
const path = require('path');
module.exports = {
entry: './index.js', // 项目入口
output: {
filename: 'bundle.js', // 默认打包后的文件名 bundle.js
path: path.resolve(__dirname, 'dist') // 默认打包后的文件目录 dist
}
};
2.配置打包脚本（package.json中配置）
可以通过npm run build进行打包
"scripts": {
"test": "webpack -v",
"build": "webpack --config webpack.config.js"
}
3.模块加载器（当项目中有css,less等样式文件，图片等文件时）
3.1.webpack加载css
需要安装style-loader和css-loader两个依赖
npm install --save-dev style-loader css-loader
webpack.config.js中加入css模块
用于匹配项目中的css文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 模块加载器配置项
module: {
rules: [
{
test: /\.css$/, // 匹配css扩展名文件
use:[ // 配置loader加载器
'style-loader', // 把css代码写入到网页中
'css-loader' // 读取css的代码
]
}
]
}
};
3.2.webpack加载less
安装依赖
npm install --save-dev less less-loader
webpack.config.js加入less模块
const path = require('path');
module.exports = {
// 其他配置...
// 模块加载器配置项
module: {
rules: [
// 这里上面有其他配置, 比如 css 之类...
// 添加一个新的, 负责 less 文件
{
test: /\.less$/, // 匹配less扩展名文件
use:[
'style-loader', // 把less代码写入到网页中
'css-loader', // 读取less的代码
'less-loader' // 解释编译less代码
]
},
]
}
};
3.3webpack加载scss
安装依赖
npm install sass-loader node-sass webpack --save-dev
webpack.config.js加入sass模块
注意：scss文件使用sass来解释编译
module: {
rules: [{
test: /\.scss$/,
use:[
'style-loader', // 把scss代码写入到网页中
'css-loader', // 读取scss的代码
'sass-loader' // 解释编译scss代码
]
}]
}
3.4加载图片
安装依赖
npm install --save-dev file-loader
webpack.config.js中加入文件模块
module.exports = {
// 其他配置...
// 模块加载器配置项
module: {
rules: [
// 其他配置...
{
test: /\.(png|svg|jpg|gif)$/, // 匹配图片文件
use: [
{
loader: "file-loader", // 处理图片文件返回链接
options: {
publicPath: "./images/", // 引入图片时会在路径前面加上该选项
outputPath: "images" // 输出到dist下的images目录
}
}
]
}
]
}
};
此时webpack文件：
这是最原始的webpack文件，这里的css文件都打包到一个js文件中(bundle.js)，还没有用到插件
const path = require('path');
module.exports = {
entry:'./index.js',// 项目入口
output:{
filename:'bundle.js',// 默认打包后的文件名 bundle.js
path:path.resolve(__dirname,'dist')// 默认打包后的文件目录 dist
},
// 遇到问题主要表现为打包过程中遇到的问题
module:{
rules:[
{
test:/\.css$/,// 匹配css扩展名文件
// use中，从低往上配置，基本先插入网页，在解释或读取
use:[// 配置loader加载器
'style-loader',// 把css代码写入到网页中
'css-loader'// 读取css的代码
]
},
{
test: /\.less$/,// 匹配less扩展名文件,
use:[
'style-loader',// 把less代码写入到网页中
'css-loader',// 读取less的代码
'less-loader'// 解释编译less代码
]
},
{
test:/\.scss$/,
use:[
'style-loader',// 把scss代码写入到网页中
'css-loader',// 读取scss的代码
'sass-loader'// 解释编译scss代码
]
},
{
test:/\.(png|svg|jpg|gif)$/, // 匹配图片文件
use:[
{
loader:'file-loader',
options:{
publicPath:'./images/',// 引入图片时会在路径前面加上该选项
outputPath:'images'// 输出到dist下的images目录
}
}
]
}
]
}
}
以下是插件版本
webpack插件
使用插件来拆分出单独的css文件以及优化打包过程
1.提取css插件
安装依赖包
npm install extract-text-webpack-plugin@next --save-dev
webpack.config.js中加入插件，并把原来的css加载器去除，重写配置
注释的为去除的代码，改为使用插件的配置写法
const path = require('path');
// 导入提取样式的webpack插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/index.js', // 项目入口
output: {
filename: 'bundle.js', // 默认打包后的文件名 bundle.js
path: path.resolve(__dirname, 'dist') // 默认打包后的文件目录 dist
},
// 模块加载器配置项
module: {
rules: [
// {
// test: /\.css$/, // 匹配css扩展名文件
// use: [ // 配置loader加载器
// 'style-loader', // 把css代码写入到网页中
// 'css-loader' // 读取css的代码
// ]
// },
// {
// test: /\.less$/, // 匹配less扩展名文件
// use: [
// 'style-loader', // 把less代码写入到网页中
// 'css-loader', // 读取less的代码
// 'less-loader' // 解释编译less代码
// ]
// },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({ // 提取css
fallback: "style-loader",
use: ["css-loader"]
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({ // 提取less
fallback: "style-loader",
use: ["css-loader", "less-loader"]
})
},
]
},
// 使用插件配置
plugins: [
new ExtractTextPlugin('style/style.css') // 提取到dist的style文件夹中
]
};
2.自动生成html插件
安装依赖
npm install --save-dev html-webpack-plugin
webpack中进行配置
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 其他配置
plugins: [
new ExtractTextPlugin("style/style.css"),
// + 新增配置
new HtmlWebpackPlugin({
template: "public/index.html" // template指定默认html模板
})
]
};
3.打包清理旧文件夹
安装依赖
npm install --save-dev clean-webpack-plugin
webpack.config.js中配置
// 导入清除插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// 其他配置
plugins: [
new ExtractTextPlugin("style/style.css"),
// 调用清除打包目录插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "public/index.html"
}),
]
};
webpack开发服务器
注意：devServer不读取项目中的dist目录，而是读取服务器内存中的文件，我们不需要知道具体的存放地址，只需要知道两者输出的内容是一样的。
安装依赖
npm install --save-dev webpack-dev-server
webpack.config.js中进行配置
module.exports = {
// 其他配置
devtool: "source-map",
// + 开发服务配置
devServer: {
port: 8080 // 默认端口是8080
},
// 模块加载器配置项
module: {
// 其他配置
}
// 其他配置
}
package.json中重新配置
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --config webpack.config.js --open"
},
注意：--open 表示自动打开浏览器，该配置默认值是false
通过npm run dev可打包运行
webpack.config.js插件版：
const path = require('path');
// 导入提取样式的webpack插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 自动生成html模板插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//清除dist包插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry:'./index.js',// 项目入口
output:{
filename:'bundle.js',// 默认打包后的文件名 bundle.js
path:path.resolve(__dirname,'dist')// 默认打包后的文件目录 dist
},
devtool:'source-map',// + 生成映射源代码文件
// 遇到问题主要表现为打包过程中遇到的问题
module:{
rules:[
{
test:/\.css$/,// 匹配css扩展名文件
// use中，从低往上配置，基本先插入网页，在解释或读取
use:ExtractTextPlugin.extract({// 提取css
fallback: "style-loader",
use:["css-loader"]
})
},
{
test: /\.less$/,// 匹配less扩展名文件,
use:ExtractTextPlugin.extract({// 提取less
fallback: "style-loader",
use:["css-loader","less-loader"]
})
},
{
test:/\.scss$/,
use:ExtractTextPlugin.extract({// 提取scss
fallback: "style-loader",
use:["css-loader","sass-loader"]
})
},
{
test:/\.(png|svg|jpg|gif)$/, // 匹配图片文件
use:[
{
loader:'file-loader',
options:{
publicPath:'./images/',// 引入图片时会在路径前面加上该选项
outputPath:'images'// 输出到dist下的images目录
}
}
]
}
]
},
plugins:[
new ExtractTextPlugin('style/style.css'),// 提取到dist的style文件夹中
// 调用清除打包目录插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'public/index.html'// template指定默认html模板
})
]
}
vue在webpack中的优化配置
安装和配置vue-loader
npm install -D vue-loader vue-template-compiler vue-style-loader
在webpack.config.js配置
// 1. webpack.config.js vue的加载器必须配置这个插件使用
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{ // 2.
test: /\.vue$/,
loader: 'vue-loader'
},
{ // 3. vue-style-loader
test: /\.css$/,
use: ExtractTextPlugin.extract({ // 提取css
fallback: "vue-style-loader",
use: ["css-loader"]
})
},
]
},
plugins: [
// 4. 请确保引入这个插件！
new VueLoaderPlugin()
]
}
src目录别名和忽略拓展名
// 模块解释
resolve: {
// 提供别名(快捷方式)，方便查找模块的路径
// 避免长串的 ../../../的组合
alias: {
'@': path.resolve(__dirname, "../src")
},
// 忽略扩展名, 希望在写代码的时候可以省略某些常用扩展名
extensions: [".js", ".json", ".vue"]
},
vue版本第一节已经给到
157
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
