Watch 1 Star 1 Fork 0

YqqDocument / webother

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
前端web技术相关资料,摘记整理 spread retract

Clone or download
WebPack学习摘记.md 14.26 KB
Copy Edit Web IDE Raw Blame History
yuan authored 2019-11-15 08:03 . 上传文档

WebPack学习摘记

WebPack作用

  • 打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。

  • 转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。

  • 优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任。

WebPack安装

  • 安装WebPack之前需要先安装node.js环境
  • 全局安装方式:npm install -g webpack
  • 对项目目录安装:
    • 创建项目目录
    • 在项目目录中进行初始化操作,生成package.json文件:npm init,输入命令按回车后,npm终端会问你关于项目的名称,描述等问题,可以一路按回车完成。
    • 在目录中安装webpack:npm install --save-dev webpack。参数–save是要保存到package.json中,dev是在开发时使用这个包,而生产环境中不使用。
    • 查看webpack安装版本:webpack -v,如果能看到版本信息则说明安装成功。

建立项目基本结构

  • 对当前项目目录完成webpack安装后,在项目目录下创建src文件夹和dist文件夹。
    • src文件夹:代码文件夹,用来存放我们编写的代码文件。
    • dist文件夹:用来存放webpack打包生成后的文件,可以理解为用于生产环境正式运行的文件。
  • 完成目录结构的创建后可以在src目录中进行编码。

webpack打包命令

  • webpack打包命令
webpack {entry file} {destination for bundled file}

{entry file}:入口文件路径,一般为src目录下面的文件名

{destination for bundled file}:打包后存放的路径,一般为dist文件夹

  • 注意事项1:webpack4.0以上版本打包命令有所不同,需要加上参数“-o”
webpack {entry file} -o {destination for bundled file}
  • 注意事项2:在webpack正常安装成功的情况下,如果打包时出现:Cannot find module ‘webpack’的错误,需要查看webpack的版本,这种错误一般是在4.0以上版本出现,需要安装:webpack-cli,因为在webpack 3中,webpack本身和它的CLI以前都是在同一个包中,但在第4版中,为了更好地管理它们,已经将两者分开来,webpack-cli安装命令:
npm install webpack-cli -g

在这里使用了全局安装,安装完成后,再使用webpack命令打包就不会抛错。

webpack配置文件

在实际开发过程中,并不会使用如上的打包方式,而是使用配置文件的方式指定入口文件和出口文件,同时指定其他的参数配置,配置文件默认名为:webpack.config.js,该文件需要自己创建,存放于项目的根目录中,一个没有内容的标准webpack配置模版如下所示:

webpack.config.js

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

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

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

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

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

    • devServer:配置开发服务功能。

entry选项(入口配置)

这个选项就是配置我们要压缩的文件一般是JavaScript文件(也可以是CSS…..)。这里要填写的是src目录下的文件,如entery.js。

wepback.config.js中的entry选项

//入口文件的配置项
entry:{
    //里面的entery是可以随便写的
    entry:'./src/entry.js'
},

output选项(出口配置)

出口配置是用来告诉webpack最后打包文件的地址和文件名称的,应该打包到dist目录下。在编写出口文件时,我们需要用到一点Node的知识,就简单的两句代码,用于指明打包路径与打包文件名,只要了解就可以了。const,是ES6的语法,这里申明项目路径。

//项目绝对路径
const  path  =  require('path');
//出口文件的配置项
output:{
    //打包的路径
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'bundle.js'
    
},

filename:是打包后的文件名称,这里我们起名为bundle.js。

单出入口webpack.config.js的代码:

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'bundle.js'
    },
    //模块:例如解读CSS,图片如何转换,压缩
    module:{},
    //插件,用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

多入口、多出口配置的webpack.config.js的代码:

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js',
        //这里我们又引入了一个入口文件
        entry2:'./src/entry2.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js'
    },
    //模块:例如解读CSS,图片如何转换,压缩
    module:{},
    //插件,用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

可以看到代码的第7和14行进行了增加和修改,在入口文件配置中,增加了一个entry2.js的入口文件(这个文件你需要自己手动建立),这时候要打包的就有了两个入口文件。在代码14行我们把原来的bundle.js修改成了[name].js[name]的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件。完成后可以在终端中直接输入webpack就会进行打包。

服务和热更新

我们在调试代码的过程中,希望完成代码的修改后能马上看到修改的效果,这个就是所谓的热更新。我们可以安装'webpack-dev-server'并在webpack.config.js配置文件中的devServer配置节进行配置来实现热更新,具体操作步骤如下:

  • 安装webpack-dev-server
npm install webpack-dev-server --save-dev

这是本地安装,所以使用了–save-dev。安装完webpack-dev-server,还需要配置package.json中的scripts项,不然运行时会提示“无法找到内部或外部命令”类似这种错误。

  • 修改package.json中的scripts项
"scripts": {
    "server":"webpack-dev-server"
 },
  • 配置webpack.config.js文件中的devServer配置节
devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址,可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1717
    }
  • contentBase:配置服务器基本运行路径,用于找到程序打包地址。

  • host:服务运行地址,建议使用本机IP。

  • compress:服务器端压缩选型,一般设置为开启。

  • port:服务运行端口,建议不使用80,很容易被占用,这里使用了1717.

配置好保存后,在终端里输入 npm run server 打开服务器。然后在浏览器地址栏输入http://localhost:1717就可以看到结果了。

打包css文件

CSS文件打包,需要先对webpack.config.js里的Loaders配置项进行设置。对css文件打包需要安装style-loader和css-loader

  • Loaders说明

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

  • style-loader安装

    它是用来处理css文件中的url()等,npm中的网址:https://www.npmjs.com/package/style-loader,用npm install 进行项目安装:

npm install style-loader --save-dev
  • css-loader安装

它是用来将css插入到页面的style标签。npm中的网址:https://www.npmjs.com/package/css-loader

用npm install 进行项目安装:

npm n install --save-dev css-loader

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

  • loaders配置

修改webpack.config.js中module属性中的配置代码如下:

module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },
  • Loaders配置说明

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

    完成以上安装和配置后,可以开始创建css文件,在/src目录下,建立一个css文件夹,在文件夹里建立index.css文件。代码内容如下。

    ./src/css/index.css

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

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

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

    import css from './css/index.css';

    完成后运行命令:npm run server,将自动打包css文件到dist目录。

  • 注意事项

    在打包过程中有时会出现如下错误:

    img

    出现这种情况,在引入css文件时需要把loader加入进去:

    import css from 'style-loader!css-loader1./css/index.css';
  • 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"
                          }
                      ]
                  }
              ]
          },

压缩JS代码

为了提高页面响应速度,在web正式发布时对js代码进行压缩处理,在Webpack中可以很轻松的实现JS代码的压缩,它是通过插件的方式实现的,这里我们就先来引入一个uglifyjs-webpack-plugin(JS压缩插件,简称uglify)。

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

  • 引入uglify

    我们需要在webpack.config.js中引入uglifyjs-webpack-glugin插件

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

    引入后在plugins配置里new一个 uglify对象就可以了,代码如下:

     plugins:[
            new uglify()
        ],

    这时候在终端中使用webpack进行打包,你会发现JS代码已经被压缩了。如果你用的VSCode的话,可以按Alt+Z让他文件自动换行,查看效果。

    当前完整webpack.config.js文件中的所有代码如下:

    const path=require('path');
    const uglify = require('uglifyjs-webpack-plugin');
    module.exports={
        entry:{
            entry:'./src/entry.js',
            entry2:'./src/entry2.js'
        },
        output:{
            path:path.resolve(__dirname,'dist'),
            filename:'[name].js'
        },
        module:{
            rules:[
                {
                    test:/\.css$/,
                    use: ["style-loader", "css-loader"]
                }
            ]
        },
        plugins:[
            new uglify()
        ],
        devServer:{
           contentBase:path.resolve(__dirname,'dist'),
           host:'192.168.0.104',
           compress:true,
           port:1717
        }
    }

打包html文件

在之前的学习内容中,因为还未牵涉到html文件打包内容,所以html文件直接写在dist正式发布的文件目录中,而实际开发当中所有编码文件包括html是放在src目录中,通过webpack直接打包到dist发布目录中,要打包html文件需要安装html插件,并对webpack.config.js进行配置。

  • 还原处理

    • 复制dist目录中的index.html文件,将文件中的js引用去除保存,打包时webpack会将js自动引入到html文件中。
    • 删除dist目录中的所有文件。
  • 安装html插件

    使用npm进行安装包。

    npm install --save-dev html-webpack-plugin
  • 配置webpack.config.js

    • 在webpack.config.js文件中引入html-webpack-plugin插件。

      const htmlPlugin= require('html-webpack-plugin');
    • 在plugins配置项中加入htmlPlugin

       plugins:[
       	new htmlPlugin({
          	minify:{
              	removeAttributeQuotes:true
              },
              hash:true,
              template:'./src/index.html'
                 
       	})
       ]
      • minify:是对html文件进行压缩,removeAttrubuteQuotes是却掉属性的双引号。
      • hash:为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
      • template:是要打包的html模版路径和文件名称。
  • 使用webpack打包,打包成功后查看dist目录中的文件,正确情况下html文件已经生成,用npm run server命令运行,可以看到一样的运行效果。

打包图片文件

Comment ( 0 )

Sign in for post a comment

other
1
https://gitee.com/YqqDocument/web.git
git@gitee.com:YqqDocument/web.git
YqqDocument
web
web
master

Help Search