前言
看了大量的文章，关于vue都是直接使用vueCli实现vue项目的基本环境搭建，使用最原始的搭建方法的很少很少，深以为要想真正学好vue，还是要将webpack充分理解，同时将其与vue结合，这样即使没有vueCli，搭建vue的环境也不在话下。
下面我们将从1，2，3，总共3个部分，渐进式的改良代码，利用webpack从最基本的项目的环境搭建（第一部分），到利用webpack基于script的vue的项目环境（第二部分），最后到利用webpack搭建基于单文件vue组件的项目环境（第三部分）。相信通过这种方式，对webpack的理解可以到一个不错的高度。
好的，开始进入正题，首先，我们从利用webpack搭建一个最简单的项目开始：
1.安装项目需要的相关依赖包
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev style-loader
npm install --save-dev css-loader
npm install --save-dev file-loader
npm install --save-dev html-webpack-plugin
//这里之所以用mini-css-extract-plugin而不是extract-text-webpack-plugin，是因为我们使用webpack4，而4推荐mini-css-extract-plugin来做css的提取
npm install --save-dev mini-css-extract-plugin
这里我稍微介绍以下，安装的webpack包是webpack的核心，必须有它才能使用webpack，但是光有他不行，还需要webpack-cli这个命令行工具，至于webpack-dev-server则是webpack提供给我们的一个服务器工具，帮助我们在开发环境下启动项目。style-loader和css-loader则是webpack的loader，前者用于向网页中动态插入style标签和css，后者则是转换css中的import和url，file-loader则是针对css或者js中引入的图片进行处理，html-webpack-plugin和mini-css-extract-plugin则是webpack需要的额外的插件，前者用于动态将生成的打包文件插入index.html,后者则是将css提取成单独的css文件.
项目结构
接着我们来挨个看下这些文件的内容,首先是main.css:
.app{
color:red;
font-size: 24px;
width:150px;
height:100px;
background-image: url('../img/img.jpg');
background-repeat: no-repeat;
}
接着是util.js
import img from './img/login-bg.jpg'
export default function say() {
console.log(img)
console.log('hellow world')
}
无论是main.css还是util.js,我们都引入了图片,这里关于图片的处理,就是要交给file-loader,因为在webpack的世界里,一切皆模块,但webpack只认识js的模块,对于图片模块,只能交给专门的loader来处理,也就是file-loader
然后是main.js
import say from './util'
import './css/main.css'
say()
template.html的具体内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 使用htmlWebpackPlugin和miniCssExtractPlugin这两个插件就不使用下面这种手动导入bundle.js的方式 -->
<!-- <script src="/custom/bundle.js"></script> -->
</head>
<body>
<div class="app">
app的应用
</div>
</body>
</html>
最后就是核心的webpack.config.js
const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
//output的publicPath决定了异步加载的js，使用htmlWebpackPlugin插入的bundle.js，从css中引入的图片或字体，以及miniCssExtractPlugin分离的css等的文件引用路径
publicPath: '/dist/'
},
mode: 'development',
devServer: {
publicPath: "/dist/"
},
module: {
rules: [
// {
// //css样式被bundle.js注入到html页面的style里
// test: /\.css$/i,
// exclude: /node_modules/,
// use: ['style-loader', 'css-loader']
// },
{
test: /\.css$/i,
exclude: /node_modules/,
use: [{
loader: miniCssExtractPlugin.loader
}, 'css-loader']
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './images/'
}
},
],
},
]
},
plugins: [
//在dist下以template.html为模板生成index.html文件，同时将
//bundle.js插入html文件的body底部
new htmlWebpackPlugin({
template: './template.html',
filename: 'index.html'
}),
// 将css样式抽取到单个css文件中，以link文件的方式插入到index.html的head中
new miniCssExtractPlugin({
filename: '[name].css'
})
]
}
ok,到这里，我们可以选择打包项目，也可以选择使用webpack-dev-server来启动项目(访问localhost:8080/dist/index.html)即可
这里主要是利用webpack包装了一个js项目，主要是演示关于文件，css，js在webpack中的基本使用，目前还没有引入vue的内容，下面第二部就是将vue加进来
网友评论