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

vue中webpack编译打包使用之Vue知识点归纳(十一)_第1张图片

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"

vue中webpack编译打包使用之Vue知识点归纳(十一)_第2张图片

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

编译成功,打开页面
vue中webpack编译打包使用之Vue知识点归纳(十一)_第3张图片
然后我们在 main.js 文件中加入

document.getElementById('app').innerHTML="hello 小疯子"

然后保存,浏览器中自动更新
vue中webpack编译打包使用之Vue知识点归纳(十一)_第4张图片

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');

你可能感兴趣的:(Vue开发中的点点滴滴,vue,vue,webpack)