# webpack

**Repository Path**: lsling/webpack

## Basic Information

- **Project Name**: webpack
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-10-14
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

npm install webpack -g

参数-g表示我们将全局(global)安装 webpack, 这样你就能使用 webpack 命令了

打包命令：webpack

### 插件说明

-  压缩HTML
   

```
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
    favicon:'./src/img/favicon.ico', //favicon路径
    filename:'/view/index.html',    //生成的html存放路径，相对于 path
    template:'./src/view/index.html',    //html模板路径
    inject:true,    //允许插件修改哪些内容，包括head与body
    hash:true,    //为静态资源生成hash值
    minify:{    //压缩HTML文件
        removeComments:true,    //移除HTML中的注释
        collapseWhitespace:true    //删除空白符与换行符
    }
})
```
HtmlWebpackPlugin插件在生成HTML调用了 html-minifier 插件来完成对HTML的压缩，这里我们使用两个配置完成来移除HTML中的注释以及空白符达到压缩的效果，其他的具体的配置参数大家请参考 html-minifier API

-  压缩JS与CSS

```
new webpack.optimize.UglifyJsPlugin({    //压缩代码
    compress: {
        warnings: false
    },
    except: ['$super', '$', 'exports', 'require']    //排除关键字
}),
```
webpack已经内嵌了uglifyJS来完成对JS与CSS的压缩混淆，无需引用额外的插件。这里需要注意的是压缩的时候需要排除一些关键字，不能混淆，比如$或者require，如果混淆的话就会影响到代码的正常运行。

- webpack-dev-server
webpack开发服务器，是webpack官方提供的一个辅助开发工具，它可以自动监控项目下的文件，一旦有修改保存操作，开发服务器就会自动运行webpack 打包命令，帮我们自动将开发的代码重新打包。而且，如果需要的话，还能自动刷新浏览器，重新加载资源。步骤如下：
    1. 安装webpack-dev-server:npm install webpack-dev-server --save-dev
    2. 通过命令来启动开发服务器：webpack-dev-server--inlinewebpack-dev-server有两种启动模式：iFrame：该模式下修改代码后会自动打包，但是浏览器不会自动刷新inline：内联模式，该模式下修改代码后，webpack将自动打包并且刷新浏览器，让我们看到最的修改效果。要实现修改实时刷新浏览器，需要==模块热部署：webpack-dev-server --inline --hot==（这个技术目前只是在试验阶段，可能会存在一些BUG，所以不建议大家在生产环境中使用，在开发环境中体验一下到是没啥问题）。
    3. 服务器启动成功以后，我们只需要在浏览器中访问 http://localhost:8080 即可访问


---

### 踩过的坑
1. packjson里的name不能用==webpack==
2. 要在项目里安装==node sass== ,不然编译不了sass,如果安装node-sass总是失败，或安装成功了，使用webpack编译sass报错，说找不到module，应该是网络原因，最方便的方法是使用taobao镜像安装，因为node-sass已经镜上到taobao上，参考地址：https://npm.taobao.org/，安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装上cnpm后，可以使用：
cnpm install node-sass --save-dev
也可以不安装cnpm，直接使用镜像安装：
npm install node-sass --save-dev --registry=https://registry.npm.taobao.org

### 资料链接
1. https://segmentfault.com/a/1190000005089993