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.jsoutput:{// 存放打包后的文件输出目录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文件

<!DOCTYPE html>
<html><meta charset="utf-8"><title>webpack</title><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.jsoutput: {// 存放打包后的文件输出目录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');