webpack是什么？
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。在开始前你需要先理解四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)，如果你还不清楚可以先前往webpack官网，可能有些小伙伴在利用vue-cli搭建vue项目是对于输入 npm run build就可以将我们所写的代码打包不是很理解，那么接下来博主将带着大家一起搭建一个简易的vue-cli.
一、webpack4之出口和入口
1、首先输入npm init -y 初始化项目文件夹
2、输入 npm i webpack webpack-cli --save-dev 命令下载依赖
3、项目中新建一个src目录 里面放一个index.js里面的内容随便写
4、在项目中新建一个webpack.config.js文件
5、在package.json中找到script加入
“scripts”: {
“build”: “webpack --mode production”,
},
production 可以换成development 生产模式(线上要压缩处理)和开发模式(本地随便写
写完以后运行 npm run build 就会发现项目中多出一个dist文件夹 里面有一个main.js 如下
二、webpack4之插件的使用
1、输入npm install html-webpack-plugin --save-dev下载插件 进行页面js自动引入更新并将指定的模板页面和指定的js引入生成到指定地方中去
2、在webpack.config.js文件中引入插件并添加如下内容
plugins: [
new HtmlWebpackPlugin({
title: "webpack",
template: "public/index.html",
chunks: ['main']
}),
],
3、在项目文件夹中新建public文件夹并新建一个index.html文件，在title标签中写入
<%= htmlWebpackPlugin.options.title %>
4、运行npm run build继续打包
三、webpack4中插件css的处理
1、新建文件index.css 里面随便写点样式
2、在index.js中引入index.css (import “./index.css”)
3、引入css-loader style-loader 引导器
npm install --save-dev css-loader
npm install --save-dev style-loader
4:配置中添加
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
],
},
然后运行 npm run build ，但是此时会将所有的css文件以js的形式加载，需要分离才符合正常的阅读习惯。
5、输入 npm install --save-dev mini-css-extract-plugin安装css分离插件将css分离。修改上述规则将为
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
],
},
四、webpack4启动服务
是不是觉得每次运行npm run build很麻烦呢，为了简化操作我们引入一个插件来启动一个服务。
1、通过 npm install webpack-dev-server --save-dev 下载
2、然后在package.json中修改
“scripts”: {
“build”: “webpack --mode production”,
“dev”: “webpack-dev-server --mode production”,
“test”: “echo “Error: no test specified” && exit 1”
},
3、在webpack.config.js中加入
devServer: {
contentBase: './dist',
port: 1234,
open: true
}
五、webpack4中sass的使用
1、安装
npm install sass-loader node-sass --save-dev
2、配置rules中加入 sass 重新编译就可以了
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
六、webpack中图片的处理
1、安装
npm install url-loader --save-dev
2、在rules中添加
{
test: /\.(png|jpg|gif)$/i,
use: [ //此引导器会把图片以二进制流存储
{
loader: 'url-loader',
options: {
limit: false,
name: '/img/[name].[hash:8].[ext]'
},
},
],
},
3、如果是大图片就应该使用file-loader
安装 npm install file-loader --save-dev
在rules中添加
{
test: /\.(png|jpe?g|gif)$/i, //此引导器会把图片以文件存储
use: [
{
loader: 'file-loader',
},
],
},
提示：无论你的图片有多大都应该执行上述两个命令，否则会报错
七、webpack中es6转es5
1、安装转换插件
npm install --save-dev babel-loader @babel/core @babel/preset-env
2、在rules中添加配置
{
test: /\.js$/,
exclude: /node_modules/, // 排除的目录
// 使用babel-loader将ES6代码转为ES5，做浏览器兼容
// 同时需要建立.babelrc文件，调用@babel/preset-env插件将ES6转为ES5
loader: "babel-loader"
}
3、在项目文件夹下新建一个.babelrc文件并写入
{
"presets": [
"@babel/preset-env"
]
}
4、重新编译在看效果 有es6的地方都变成了es5的写法，实现了对浏览器兼容。
ps：通过以上七个步骤即可实现webpack脚手架的搭建,到此我们的项目目录如下：
下面的步骤将告诉你.vue文件是如何变成.js文件的。
八、配置vue项目解析vue文件
1、安装vue
npm i vue --save
2、在src下的index.js中引入vue
import Vue from "vue";
new Vue({
el:"#app",
data:{
username:"leson"
}
})
3、在public下的index.html文件中加入
<div id="app">{{username}}</div>
4、运行后页面并没有效果，甚至又可能会报错，原因是main引入的vue的路径不对，不是一个相对路径 ，需要引入node_modules中的vue的安装目录
5、只需在在webpack.config.js中配置正确路径即可
// 设置模块如何被解析
resolve: {
// 当安装vue时，默认使用的是runtime-only版本，此版本只含有vue运行的代码，不包含编译template的代码
// 需要重新更换含有runtime-compiler的版本，因为runtime-complier含有complier代码可以用于编译template
// alias（别名）: 用别名代替前面的路径，不是省略，而是用别名代替前面的长路径
// 如下，当main.js中import Vue from "vue"时，因为vue是别名，所以实际为import Vue from "vue/dist/vue.esm.js"
// 别名好处是webpack直接会去别名对应的目录去查找模块，减少了webpack自己去按目录查找模块的时间
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
九、配置vue项目的.vue文件
1:安装用来识别.vue的文件的引导器
npm i vue-loader vue-template-compiler -D
2、在webpack.config.js引入
const VueLoaderPlugin = require('vue-loader/lib/plugin');
3、在plugins中添加
new VueLoaderPlugin() //只加入这个即可
完整的如下
plugins: [
new HtmlWebpackPlugin({
title: "webpack",
template: "public/index.html",
chunks: ['main']
}),
new MiniCssExtractPlugin({
filename: 'css/[name].[hash:8].css' //分离后的css文件放在dist/css中以文件名.hash(8位)名命
}),
new VueLoaderPlugin() //只加入这个即可
],
4、在rules中加入
{
test: /\.vue$/,
use: ["vue-loader"]
}
5、新建一个App.vue文件
6、在index.js中引入
7、在public下的index.html中加入
<div id="app"></div>
8、打包后你将在页面中看到
十、配置vue-router
1、安装
npm install vue-router --save
2、在src里面新建一个router的文件夹，在里面创建一个index.js
3、写入路由配置
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import List from "../views/List.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path:"/list",
name:"list",
component:List
},
];
const router = new VueRouter({
mode:"hash",
routes
});
export default router;
4、在src的index.js中引入
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
new Vue({
el: "#app",
router,
render: h => h(App)
})
vuex的引入也如此这里就不再赘述了。
总结：到此简易的vue-cli搭建完成，想必读者对文章开头所说的执行npm run build 命令对vue-cli项目打包有了更深的认识。
完整的项目目录如下：
完整的webpack.config.js文件如下：
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: "./src/index.js", //设置入口文件
output: {
path: path.resolve(__dirname, "dist"), //设置出口 可以不用设置此项（打包后的文件默认放在dist文件夹中）
filename: "js/[name].[hash:8].js" //打包后的文件将放在dist/js中
},
plugins: [
new HtmlWebpackPlugin({
title: "webpack",
template: "public/index.html",
chunks: ['main']
}),
new MiniCssExtractPlugin({
filename: 'css/[name].[hash:8].css' //分离后的css文件放在dist/css中以文件名.hash(8位)名命
}),
new VueLoaderPlugin() //只加入这个即可
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.(png|jpg|gif)$/i,
use: [ //此引导器会把图片以二进制流存储
{
loader: 'url-loader',
options: {
limit: false,
name: '/img/[name].[hash:8].[ext]'
},
},
],
},
// {
// test: /\.(png|jpe?g|gif)$/i, //此引导器会把图片以文件存储
// use: [
// {
// loader: 'file-loader',
// },
// ],
// },
{
test: /\.js$/,
exclude: /node_modules/, // 排除的目录
// 使用babel-loader将ES6代码转为ES5，做浏览器兼容
// 同时需要建立.babelrc文件，调用@babel/preset-env插件将ES6转为ES5
loader: "babel-loader"
},
{
test: /\.vue$/,
use: ["vue-loader"]
}
],
},
devServer: {
contentBase: './dist',
port: 1234,
open: true
},
// 设置模块如何被解析
resolve: {
// 当安装vue时，默认使用的是runtime-only版本，此版本只含有vue运行的代码，不包含编译template的代码
// 需要重新更换含有runtime-compiler的版本，因为runtime-complier含有complier代码可以用于编译template
// alias（别名）: 用别名代替前面的路径，不是省略，而是用别名代替前面的长路径
// 如下，当main.js中import Vue from "vue"时，因为vue是别名，所以实际为import Vue from "vue/dist/vue.esm.js"
// 别名好处是webpack直接会去别名对应的目录去查找模块，减少了webpack自己去按目录查找模块的时间
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
完整的package.json文件如下：
{
"name": "myvuecli",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"serve": "webpack-dev-server --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"vue": "^2.6.11",
"vue-router": "^3.3.4"
}
}
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
