Webpack

认识Webpack

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

--save    保存     --dev      开发环境

• 打包：可以将多个JavaScript文件打包成一个文件，减少服务器压力和下载带宽
• 转换：把拓展用语言转换为普通的JavaScript，让浏览器顺利运行
• 优化：前端性能优化

全局安装webpack

npm install -g webpack

对项目目录进行安装：

npm init

npm install --save-dev webpack

使用Webpack命令

在Git bash上使用webpack命令，执行的结果如下：

- 全局安装live-server

    cnpm install -g live-server

- 执行live-server命令

    live-server

入口和出口配置

单入口单出口

新建webpack.config.js文件，内容如下

• entry：配置入口文件的地址，可以是单一入口，也可以是多入口。
• output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
• module：配置模块，主要是解析CSS和图片转换压缩等功能。
• plugins：配置插件，根据你的需要配置不同功能的插件。
• devServer：配置开发服务功能。

const path = require('path');

module.exports = {
    entry: {
        entry: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'enter.js'
    },
    module: {

    },
    plugins: [],
    devServer: {}
}

然后命令行输入wepack，回车

多入口和多出口

const path = require('path');

module.exports = {
    entry: {
        entry1: './src/index.js', /*entry1，entry2 这个字段是随便写的*/
        entry2: './src/bounder.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'   /*打包的还是上面的名字（entry1，entry2）*/
    },
    module: {

    },
    plugins: [],
    devServer: {}
}

服务和热更新

devServer的配置如下

const path = require('path');

module.exports = {
    entry: {
        entry1: './src/entry1.js', 
        entry2: './src/entry2.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'  
    },
    module: {},
    plugins: [],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        port: 3000,
        inline: true,
        hot: true,
        host: '192.168.1.14*'
    }
}

在版本这一块踩了不少的坑，将今天的踩坑经历分享下

初次全局安装的是webpack版本是3.8.1，然后安装的webpack-dev-server的版本是3.1.1，然后定义了一个启动webpack-dev-server的命令（在package.json这个文件中）

"scripts": {
    "start": "webpack-dev-server --hot --inline"
}

当在Git bash中输入npm run start的时候，发现有提示说，没有找到 webpack-cli中的某个包，然后我就通过npm install webpack-cli --save-dev安装，然后再次输入start命令，是启动了，但是并没有实现热更新这个共能，然后就去上网搜了下，说是npm的版本需要更新下，so…我更新了下npm，然而，并没有什么用，所以呀，我继续搜了下，发现webpack的版本还是对这个成败起到了灰常大的作用，然后我在Git bash下通过npm uninstall webpack -g想要先删除掉全局安装的webpack，Git Bash中提示update….，然后我就以为删除成功了，然后又通过npm install [email protected] -g先安装了全局的，再在项目中安装了一下3.6.0这个版本的，安装的webpack-dev-server是2.9.1版本的，执行了start命令之后，发现还是没有热更新，我想通过webpack -v查看下版本，结果呢？？要哭了，还是3.8.1版本的。（继续往下看哦）

通过win+R键，调出cmd，然后输入了npm uninstall webpack -g，这次果然和之前提示是不一样了，然后npm install [email protected] -g，然后删除掉了项目中的node_modules，通过npm install安装了下依赖

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

这次呢？还是有点问题的，是浏览器的控制台中提示[HMR] Hot Module Replacement is disabled.，查了一下才知道是需要这样的，webpack-dev-server --hot --inline，之后测试，热更新可以正常使用了

持续更新中