首页 > 微信 > 详细

微信房卡炸金花搭建之【Webpack3.x】学习笔记

时间:2018-02-13 11:38:26      阅读:34      评论:0      收藏:0      [点我收藏+]

标签:服务   1.7   borde   resolv   charset   pad   问题   三种   conf   

微信房卡炸金花搭建之【Webpack3.x】学习笔记资源下载:http://www.aqiulian.com,更多Webpack3.x相关问题询问QQ:212303635

本文环境:Visual Studio Code、Windows10


什么是Webpack?

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。

我们可以从下图再次了解一下WebPack的作用: 
技术分享图片


安装WebPack

1)进入项目目录

mkdir webpack_demo  // 建立一个文件夹
cd webpack_demo     // 进入这个文件夹

 

注意:执行下一步前必须已安装node

2)初始化

npm init

 

输入完成后,npm终端会问你关于项目的名称,描述…,如果想默认直接跳过请在后面加上 -y 参数:

npm init -y

 

初始化完成后可以看到生成的package.json文件

在用npm安装前,我们先要进行一下初始化,初始化的主要目的是生成package.json文件(这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等)。

3)安装 webpack 依赖

// 第一步:全局安装
npm install -g webpack  // 这个安装会提供一个全局的webpack命令。

// 第二步:项目安装
npm install --save-dev webpack  // 安装到项目里,这样webpack运行时才会require到这个包,这两步是必须的。

 

–save与–save-dev区别:

  • –save是对生产环境所需依赖的声明(开发应用中使用的框架,库)
  • –save-dev是对开发环境所需依赖的声明(构建工具,测试工具)

迅速上手第一个Demo

建立基本项目结构

进入之前创建的webpack_demo项目文件夹后建立两个文件夹,分别是src文件夹和dist文件夹:

  • src文件夹:用来存放我们编写的JavaScript代码,可以简单的理解为用JavaScript编写的模块。
  • dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。

可以理解为:src是源码文件,dist是我们编译打包好的文件;一个用于开发环境,一个用于生产环境

开发环境:在开发时需要的环境,这里指在开发时需要依赖的包。 
生产环境:程序开发完成,开始运行后的环境,这里指要使项目运行,所需要的依赖包。

编写程序文件

/dist/index.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>
</head>
<body>
    <div id="title"></div>
    <script src="./bundle.js"></script>  // 这个文件现在还没有,这是用webpack执行打包命令后生产的文件。
</body>
</html>

 

src/entery.js

document.getElementById(‘title‘).innerHTML = ‘Hello Webpack‘;

1

第一次Webpack打包

webpack src/entry.js dist/bundle.js  // webpack 入口文件 打包存放位置

 

执行结果如下图: 
技术分享图片


配置文件webpack.config.js

 第一次打包webpack 中的终端打包方案,在实际开发中并不使用,而是使用webpack的配置文件的方式进行设置。

  webpack.config.js就是Webpack的配置文件,这个文件需要在项目根目录下手动建立。建立好后我们对其进行配置,先看下面的代码(webpack.config.js的基本结构),这是一个没有内容的标准webpack配置模版。

module.exports={
    //入口文件的配置项
    entry:{},
    //出口文件的配置项
    output:{},
    //模块:例如解读CSS,图片如何转换,压缩
    module:{},
    //插件,用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

 

① entry 和 output

当我不用终端打包方案而采用webpack.config.js配置文件时:

单入口、单出口配置

const path = require(‘path‘);
module.exports={
    //入口文件的配置项
    entry:{
        entry:‘./src/entry.js‘
    },
    //出口文件的配置项
    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,‘dist‘),  // path.resolve(__dirname,’dist’)就是获取了项目的绝对路径。
        //输出的文件名称
        filename:‘bundle.js‘
    },
    ...
}

 

多入口、多出口配置

const path = require(‘path‘);
module.exports={
    entry:{   // 外部这个entry不能写错
        entry:‘./src/entry.js‘,  //里面的这两个名字随便起
        entry2:‘./src/entry2.js‘
    },
    output:{
        path:path.resolve(__dirname,‘dist‘),
        filename:‘[name].js‘  // [name]的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件
    },
    ...
}

 

对应的index.html

<div id="title"></div>
<script src="./entry.js"></script>
<script src="./entry2.js"></script>

 


② devServer

设置webpack-dev-server

安装

npm install webpack-dev-server --save-dev

 

安装完成之后需要设置下webpack.config.js中的devServer配置

devServer:{
    //设置基本目录结构
    contentBase:path.resolve(__dirname,‘dist‘),
    //服务器的IP地址,可以使用IP也可以使用localhost
    host:‘localhost‘,
    //服务端压缩是否开启
    compress:true,
    //配置服务端口号
    port:1717
}

 

配置好后,你可以试着在终端中输入webpack-dev-server,如果可以执行成功,但是往往提示下面的错误(或者是无法找到内部或外部命令)。 
技术分享图片 
出现下面的错误不用慌张,我们只要在package.json里配置一下scripts选项就可以执行了。

/package.json

"scripts": {
    "server":"webpack-dev-server --open"
},

 

配置好保存后,在终端里输入 npm run server 打开服务器并自动打开浏览器就可以看到结果了。

支持热更新

在npm run server 启动后,它是有一种监控机制的(也叫watch)。它可以监控到我们修改源码,并立即在浏览器里给我们更新。


③ module

Loaders是Webpack最重要的功能之一,他也是Webpack如此盛行的原因。

简单的举几个Loaders使用例子:

  • 可以把SASS文件的写法转换成CSS,而不在使用其他转换工具。
  • 可以把ES6或者ES7的代码,转换成大多浏览器兼容的JS代码。
  • 可以把React中的JSX转换成JavaScript代码。

Loaders的配置模型

  • test:用于匹配处理文件的扩展名的表达式,这个选项是必须进行配置的;
  • use:loader名称,就是你要使用模块的名称,这个选项也必须进行配置,否则报错;
  • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
  • query:为loaders提供额外的设置选项(可选)。

打包CSS文件

./src/css/index.css

body{
    background-color: red;
    color: white;
}

 

CSS文件建立好后,需要引入到入口文件中,才可以打包到,这里我们引入到entry.js中。

/src/entery.js中在首行加入代码:

import css from ‘./css/index.css‘;

 

CSS和引入做好后,我们就需要使用loader来解析CSS文件了,这里我们需要两个解析用的loader,分别是style-loader和css-loader。

npm install style-loader --save-dev
npm install css-loader --save-dev

 

loaders配置

webpack.config.js

//模块:例如解读CSS,图片如何转换,压缩
module:{
    rules: [
        {
            test: /\.css$/,
            use: [ ‘style-loader‘, ‘css-loader‘ ]
        }
    ]
},

 

loader的三种写法

第一种写法:直接用use
module:{
    rules:[
        {
            test:/\.css$/,
            use:[‘style-loader‘,‘css-loader‘]
        }
    ]
},

 

第二种写法:把use换成loader
module:{
    rules:[
        {
            test:/\.css$/,
            loader:[‘style-loader‘,‘css-loader‘]
        }
    ]
},

 

第三种写法:用use+loader的写法
module:{
    rules:[
        {
            test:/\.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }
            ]
        }
    ]
},

 


④ plugins

未完待续…

微信房卡炸金花搭建之【Webpack3.x】学习笔记

标签:服务   1.7   borde   resolv   charset   pad   问题   三种   conf   

原文:https://www.cnblogs.com/jrfyes/p/8446090.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号