webpack学习笔记（二）

目录

• plugin的使用
  • 是什么
  • loader和plugin的区别
  • plugin如何使用
  • 添加版权的Plugin
  • 打包html的Plugin
  • 对js文件进行压缩的Plugin
• 搭建本地服务器

plugin的使用

是什么

plugin: 插件，对现有的架构进行扩展
webpack中的插件：对现有的功能的各种扩展，打包优化、文件压缩...

loader和plugin的区别

loader是用于转换类型的模块，是一个转换器
plugin是插件，使用对功能的扩展，是一个扩展器

plugin如何使用

1. npm安装需要使用的plugins
2. 配置webpack.config.js中的plugins

添加版权的Plugin

BannerPlugin 属于webpack自带的插件

会把版权信息添加到打包出来的文件头部

//webpack.config.js
const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry: './src/main.js', // 入口
    output: {},
    module: {},
    resolve: {},
    plugins: [
        new webpack.BannerPlugin('最终版权归xxx所有')
    ]
}

打包html的Plugin

HtmlWebpackPlugin：把index.html文件打包到dist文件夹中

可以做到：

1. 可以自动根据模版生成index.html文件
2. 自动把打包好的js文件插入html中

# 安装HtmlWebpackPlugin
npm install html-webpack-plugin@3.2.0 --save-dev

// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWeboackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js', // 入口
    output: {},
    plugins: [
        new webpack.BannerPlugin('最终版权归xxx所有'),
        new HtmlWeboackPlugin({
            template: 'index.html'
        })
    ]
}

对js文件进行压缩的Plugin

在项目发布前，我们需要对js等文件进行压缩

uglify: 丑化

# 安装uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin@1.1.1 --asve-dev

// webpack.config.js
const path = require('path')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    ...
    plugins: [
        new uglifyJsPlugin()
    ]
}

搭建本地服务器

• webpack提供了一个可选的本地开发服务器
• 基于node.js搭建，内部使用express框架
• 实现让浏览器自动刷新显示修改代码后的效果

# 这个服务器是一个单独的模块，使用前需要先安装
npm install --save-dev webpack-dev-server@2.9.1

// webpack.config.js
module.exports = {
    ...
    devServer: {
        contentBase: './dist', //为那个文件夹提供服务
        inline: true, //实时刷新
        //port: 端口号
        //historyApiFallback
    }
}
// package.json
scripts: {
    "dev": "webpack-dev-server --open"
}

//npm run dev