阅读 102

Webpack(一)

这是我参与更文挑战的第10天,活动详情查看: 更文挑战

来啦来啦,接day9

1. 作用:

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

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

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

2. 配置文件webpack.config.js

webpack.config.js就是Webpack的配置文件,这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置,配置模版。

webpack.config.js
module.exports={
    //入口文件的配置项
    entry:{},
    //出口文件的配置项
    output:{},
    //模块:例如解读CSS,图片如何转换,压缩
    module:{},
    //插件,用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}
复制代码
  • entry:配置入口文件的地址,可以是单一入口,也可以是多入口。

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

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

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

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

3. install

首先添加我们即将使用的包:

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

webpack是我们需要的模块打包机,webpack-dev-server用来创建本地服务器,监听你的代码修改,并自动刷新修改后的结果。

这些是有关devServer的配置

  • contentBase, // 为文件提供本地服务器

  • port, // 监听端口,默认8080

  • inline, // 设置为true,源文件发生改变自动刷新页面

  • historyApiFallback // 依赖HTML5 history API,如果设置为true,所有的页面跳转指向index.html

  • devServer:{ contentBase: './src' // 本地服务器所加载的页面所在的目录 historyApiFallback: true, // 不跳转 inline: true // 实时刷新 }

然后我们在根目录下创建一个'webpack.config.js',在'package.json'添加两个命令用于本地开发和生产发布

"scripts": {
            "start": "webpack-dev-server",
            "build": "webpack"
        }

复制代码

在使用webpack命令的时候,他将接受webpack的配置文件,除非我们使用其他的操作

4. entry

entry: 用来写入口文件,它将是整个依赖关系的根

var baseConfig = { entry: './src/index.js' }

当我们需要多个入口文件的时候,可以把entry写成一个对象

var baseConfig = {
        entry: {
            main: './src/index.js'
        }
    }
    
复制代码

建议使用后面一种方法,因为他的规模会随你的项目增大而变得繁琐

文章分类
前端
文章标签