阅读此文，要求读者熟悉旧版本的Webpack
image
一、什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
二、webpack4.x基本使用
本地使用（全局环境）
(webpack4.0 的一个依赖项)
npm install webpack webpacl-cli -g
装好之后可以可以直接在项目根目录使用 webpack 运行打包项目
PS: webpack4.0 采用约定大于配置的方式进行定义
就是说，如果你按照webpack的约定的方式构建项目，那么你可以不需要配置文件
项目使用
1. 初始化
npm init -y
2. 约定的项目结构
+ dist
+ src
+ index.html
+ index.js
+ package.json
+ webpack.config.js （可选），还是建议使用
3. webpack.config.js 配置的一些改变
-
不需要设定入口文件和出口文件
-
引入了模式 mode 可以快速切换
-
开发环境（development）
-
上线环境（production）
4. 安装2个webpack核心包
npm|cnpm install webpack webpack-cli -D | yarn add webpack webpack-cli -D
5. 安装webpack-dev-server把main.js生成在内存中
npm install webpack-dev-server -D
在package的scripts属性上配置脚本
"scripts": { "dev": "webpack-dev-server --open --port 8080 --hot" }
6. html-webpack-plugin 配置 （把index.html生成在内存中）
安装 html-webpack-plugin
yarn add html-webpack-plugin -D
在webpack.config.js 中配置plugins
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
module.exports = {
model: 'development', //development production
plugins: [ htmlPlugin ]
}
ps: 配置 html-webpack-plugin 可以自动把打包好的main.js添加到index.html中
7、使用webpack使用css 、less
webpack默认只支持js的模块化，如果需要把其他文件也当成模块引入，就需要相对应的loader解析器
安装依赖包
yarn add style-loader css-loader -D yarn add less less-loader -D
配置规则
// 这段代码意思是：匹配后缀名为css的文件,然后分别用css-loader，vue-style-loader去解析
{
test: /\.css$/,
use: ['style-loader', 'css-loader?modules']
}
{
test: /\.less$/,
use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'less-loader']
} // 打包处理 scss 文件的 loader
在src目录下新建一个assets/css目录，创建index.css和index.css 样式可以随意定义
body {
color: red;
background: url(../images/1.png)
}
在index.js 中引入.css或者.less文件
import './assets/css/index.css'
import './assets/css/index.less'
8、使用babel
ES6的语法大多数浏览器依旧不支持,bable可以把ES6转码成ES5语法，这样我们就可以大胆的在项目中使用最新特性了
安装babel依赖包
（核心包）
yarn add babel-core babel-loader babel-plugin-transform-runtime -D
（语言包）
yarn add babel-preset-env babel-preset-stage-0 -D
在webpack.config.js中配置loader
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
配置 .babelrc 文件
{
"presets": [
"env", // es的所语法
"stage-0" // 指定用哪个版本
],
"plugins": [
"transform-runtime" // 在插件的基础上运行
]
}
9、配置.vue 文件
在前面的例子里，我们使用 Vue.component 来定义全局组件，在实际项目里，更推荐使用单文件组件
yarn add vue-loader vue-template-compiler -D
配置vue-loader规则
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
]
}
在webpack.config.js文件中配置vue-loader 插件
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
....
plugins: [
...
new VueLoaderPlugin()
],
...
在src目录下新建一个App.vue
<template>
<div class="app">
app component
</div>
</template>
<script>
export default {
data: () => ({})
};
</script>
<style scoped>
</style>
10、配置url
把图片也当成模块引入
yarn add file-loader url-loader -D
webpack.config.js添加一个loader
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 处理 图片路径的 loader
在src目录下新建一个assets/images目录，存放一张图片1.png
在App.vue 中使用图片
<template>
<div class="app">
app component
<img src="./assets/images/1.png" alt="">
</div>
</template>
<script>
export default {
data: () => ({})
};
</script>
<style scoped>
</style>
三、完整配置和项目结构
----完整项目结构
----完整webpack.config.js文件
const path = require('path')
// 引入html-webpack-plugin 插件
const htmlWebpackPlugin = require('html-webpack-plugin')
// 引入vue-loader 插件
const { VueLoaderPlugin } = require('vue-loader')
const webpackPlugin = new htmlWebpackPlugin({
// 引入要写入内存的文件
template: path.join(__dirname, './index.html'),
// 给输出的文件取名
filename: 'index.html'
})
module.exports = {
mode: 'development', //production 上线需要 //development 开发需要
plugins: [
webpackPlugin,
new VueLoaderPlugin()
],
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 处理 图片路径的 loader
{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
]
}
}
----完整项目参考
网友评论