手记

webpack教程


Webpack在生产环境中有一个重要的作用就是减少http的请求数,就是把多个文件打包到一个js里,这样请求数就可以减少好多

1、安装

先装好node和npm,因为webpack是一个基于node的项目。然后

npm install -g webpack 全局安装

官方不建议全局安装webpack,所以还要进行本地安装

2、进入项目文件夹,比如webpack_demo,然后新建一个package.json的文件在项目根目录下

npm init //询问一些问题:按回车选择默认值 自动生成文件package.json

npm install --save-dev webpack //本地安装,

目前是开发环境,所以需要加上-dev,用户运行不需要依赖这个包

如果用户运行需要依赖这个包,那么就不加-dev,直接是--save,保存到生产环境

至此,webpack安装完成

3、在项目根目录下,建立

src源代码文件夹——开发环境

dist生产环境文件夹

./是当前目录

../是父级目录

/是根目录

3、在命令行中分别执行以下命令,安装对应的插件(--save-dev作用是安装的插件的同时,将插件名写入package.json的devDependencies列表中)

npm install webpack --save-dev

npm install jquery --save-dev

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

npm install extract-text-webpack-plugin –-save-dev

4、webpack ./src/entery.js -o dist/bundle.js --mode development 在终端(命令行)中使用webpack打包

下面介绍使用配置文件进行打包

5、创建webpack.config.js

module.exports={

    //入口文件的配置项

    entry:{},

    //出口文件的配置项

    output:{},

    //模块:例如解读CSS,图片如何转换,压缩

    module:{},

    //插件,用于生产模版和各项功能

    plugins:[],

    //配置webpack开发服务功能

    devServer:{}

}

entry:配置入口文件的地址,可以是单一入口,也可以是多入口。

output:配置出口文件的地址,在webpack2.X版本后,支持多出口配置。

module:配置模块,主要是解析CSS和图片转换压缩等功能。

plugins:配置插件,根据你的需要配置不同功能的插件。

devServer:配置开发服务功能,后期我们会详细讲解。

[name]的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件

配置文件参数说明:

entry: 是 页面入口文件配置 (html文件引入唯一的js 文件)

output:对应输出项配置

path :入口文件最终要输出到哪里,

filename:输出文件的名称

publicPath:公共资源路径

webpack:普通打包

webpack -p:压缩打包

webpack -p -w:监听所有需要打包的代码,只要有代码被改动并保存后,就会自动进行打包

6、热更新

a.在webpack.config.js里面配置devServer

devServer:{

contentBase:path.resolve(__dirname,'dist') //基本目录结构,监听哪里的代码

host:'10.1.28.102', //ip地址,不建议填localhost 命令行ipconfig查看ipv4的值即是ip地址

compress:true, //服务器压缩参数,是否启用服务器压缩,一般启用

port:1717 //任何喜欢的数字

}

b.安装服务:npm install webpack-dev-server --save-dev

c.配置package.json

"scripts": {

"server": "webpack-dev-server",

},

d.运行命令:npm run server

注意:是conteneBase,不是contentPath

运行命令是npm run server,不是webpack-dev-server

6、live-server

本地开发常常需要搭建临时的服务,第一时间我们会想到用http-server。

但现在流行修改文件浏览器自动刷新hot socketing(热拔插),如live-reload。

若想浏览器自动打开项目,用opener。

现在live-server实现了三个插件的所有功能,并且很简单就能启动一个看起来很专业的本地服务

初始化npm:npm init

安装live-server:cnpm install -g live-server

启动live-server:live-server

如果你比较懒,可以在package.json中增加start中增加新的脚本

"scripts": {

  "server": "live-server ./ --port=9090"

}

然后执行 npm run server

浏览器会自动打开,并且当你修改本地文件,浏览器都会立即同步

7、const path = require('path');

path.resolve(__dirname,'dist'); //dist目录所在的绝对路径

8、模块:CSS文件打包Loaders

Loaders是Webpack最重要的功能之一,他也是Webpack如此盛行的原因。通过使用不同的Loader,Webpack可以利用脚本和工具,从而对不同的文件格式进行特定处理。

注意:所有的Loaders都需要在npm中单独进行安装,并在webpack.config.js里进行配置。

Loaders的配置参数:

test:用于匹配处理文件的扩展名的表达式,这个选项是必须进行配置的;

use:loader名称,就是你要使用模块的名称,这个选项也必须进行配置,否则报错;

include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);

query:为loaders提供额外的设置选项(可选)。

8.1、打包css文件,

首先在src文件夹下,建立一个css文件夹,在文件夹下需要打包的css文件

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

style-loader:用来处理css文件中的url()等

安装:npm install style-loader --save-dev

css-loader:用来将css插入到页面的style标签

安装:npm install css-loader --save-dev

两个loader都下载安装好后,我们就可以配置我们loaders了。

修改webpack.config.js中module属性中的配置代码如下(三种写法):

第一种写法:直接用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'

                }

            ]

        }

    ]

}

9、插件配置:配置JS压缩

上线前,压缩js代码,通过使用插件的方式来实现

引入一个uglifyjs-webpack-plugin(JS压缩插件,简称uglify)。

注意:虽然uglifyjs是插件,但是webpack版本里默认已经集成,不需要再次安装,但是是需要引入的

在webpack.config.js里面引入

const uglify = require('uglifyjs-webpack-plugin');

引入后,在plugins配置里new一个uglify对象即可使用,

plugins:[ //注意是[],不是{}

new uglify() //后面不加分号,多个的话加逗号

]

最后,在终端命令行,使用webpack进行打包,压缩js文件

npm run server用在开发环境,启动服务器,是对代码进行预览的,此时的代码


0人推荐
随时随地看视频
慕课网APP