vue中webpack编译打包使用之Vue知识点归纳(十一)
本文中将描述
- webpack 简述
- webpack 项目的初始化配置
- webpack 打包运行一个 vue 项目
1 什么是webpack，到底需要解决什么问题
近几年前端的快速发展，前端已不是简单的html, css, jquery这样一套技术了.前端的世界出现了越来越多的新的技术。例如
- jsx（类xml语法，增强js语义，结构清晰抽象程度高，诞生了跨平台 react native
代码模块化） - scss, stylus, less预编译语言（缓解浏览器兼容造成的冗余，精简的语法）
- AMD CommonJS import（模块化方案）
- babel（转换下一代的js,jsx）
项目不可避免的膨胀，越来越复杂，自然而然的我们就会寻求各种优化，压缩代码的方案，前端工程化让我们非常头疼，在这个寻找前端模块化解决方案过程中我们了解到了webpack。
实质上，webpack可以理解成是一种前端模块化自动打包的解决方案。更重要的是它可以通过配置就可以运用前端的各种技术。
WebPack也可以可以看做是模块打包机，它可以分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
1 webpack 初始化项目
1.1 在项目目录文件下使用终端初始化目录
npm init
1.2 安装基本配置
安装 vue 以及vue-loader ,安装成功后，会在package.json中多一项配置
npm i webpack vue vue-loader
#--save-dev 会作为开发依赖来安装 安装成功后，会在package.json中多一项配置
npm install webpack --save-dev
安装 cssloader
npm i css-loader vue-template-compiler
安装 webpack-dev-server ，它可以在开发环境中提供很多服务
npm install webpack-dev-server --save-dev
安装 cli
npm i -D webpack-cli
2 webpack 配置基本的打包
webpack 是用来编译打包项目的，那么在这里，我们需要对它进行一些目录的指定，也就是说需要告诉它要打包哪些内容，并且输出到哪。
2.1 配置 webpack 的启动命令
在 package.json文件中添加
"dev": "webpack-dev-server --open --config webpack.config.js"
config 指向了 webpack.config.js 文件，在项目目录下创建 webpack.config.js 文件,在这里面配置 webpack 打包的基本信息
var path = require('path');
var config={
// webpack 编译的入口文件
entry:{
// 配置的单入口
main:'./main'
},
//webpack 编译的出口文件
// 这里配置的打包后的文件会存储为 vue-wb/dist/main.js
output:{
// 存放打包后的文件输出目录
path:path.join(__dirname,'./dist'),
// 资源文件引用的目录
publicPath:'/dist/',
// 输出文件的名称
filename:'main.js'
}
};
module.exports = config;
在项目目录下创建 main.js 文件，当然目前 main.js 文件中无内容，这个main.js 文件则是上述配置中 webpack 编译的的入口文件。
项目我们在项目目录下创建 index.html , 在这里引用了 “./dist/main.js” 正是上面配置 webpack 打包输出的js文件
<html>
<meta charset="utf-8">
<title>webpacktitle>
<body>
<div id="app">
Hollo world
div>
<script type="text/javascript" src="/dist/main.js">script>
body>
html>
然后在项目目录下打开终端 执行
npm run dev
编译成功，打开页面
然后我们在 main.js 文件中加入
document.getElementById('app').innerHTML="hello 小疯子"
然后保存，浏览器中自动更新
3 webpack 加载器描述
在 webpack 的世界中，每个文件都是一个模块，比如 .css .js .html .jpg 等，对于不同的模块，需要使用不同的加载器来处理，比如现在要写一些 css 样式，就需要配置 css-loader 和 style-loader
npm install css-loader --save-dev
npm install style-loader --save-dev
安装完成后，在 webpack.config.js 文件中配置 loader ，增加对 .css 文件的处理
var path = require('path');
var config = {
// webpack 编译的入口文件
entry: {
// 配置的单入口
main: './main'
},
//webpack 编译的出口文件
// 这里配置的打包后的文件会存储为 vue-wb/dist/main.js
output: {
// 存放打包后的文件输出目录
path: path.join(__dirname, './dist'),
// 资源文件引用的目录
publicPath: '/dist/',
// 输出文件的名称
filename: 'main.js'
},
// module 对象中的 rules 属性中可以指定一系列的loaders,每一个 loader 都
// 包含一个 test 和 use 选项
// 当 webpack 编译过程中遇到 require() 或者 import 语句导入一个后缀名为 .css
// 文件时，先将它通过 css-loader 转换,再通过 style-loader 转换，然后继续打包
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
module.exports = config;
然后在项目目录下创建 style.css文件
#app{
font-size: 20;
color: blueviolet;
}
然后在 main.js 文件中引入
import './style.css'
document.getElementById('app').innerHTML="hello 小疯子"
然后
npm run dev
4 webpack 中 css 文件的管理
安装 extract-text-webpack-plugin 插件把散落在项目中的所有 css 文件打包并生成一个 css 文件
npm install extract-text-webpack-plugin --save-dev
或者 webpack 4.0.0 以上使用
npm install --save-dev extract-text-webpack-plugin@next
然后在配制文件中导入插件
// 导入插件
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');