webpack基础知识的笔记

/***
 * webpack 详解
 * 1.作用：打包机 不仅可以处理js 还可以处理css ，html 和图片等
 *   可以做：代码转换，文件优化压缩，代码分割（4.0），模块合并，自动刷新，代码校验，自动发布
 * 2.初始化项目
 *   npm init -y
 *   npm i webpack webpack-cli -D
 * 3.创建webpack.config.js
 *   创建./src文件
 *   创建./dist文件 //生成可上线的文件
 * 4.核心内容
 *   entry
 *     入口文件
 *     可接收:'index.js',['index.js','base.js'],{index:'./src/index.js',base:'./src/base.js'}
 *   output
 *     出口文件
 *     path:绝对路径，输入的口  在这里是./dist
 *     filename: 文件， 也可以写成 [name][hash:8].js 后面可以限定位数，
 *   module
 *     模块
 *     最重要的部分之一loader
 *       这里用了 css-loader 和 style-loader 两个loader 处理css
 *       npm i css-loader style-loader -D 
 *      补充：
 *         loader 的三种写法
 *          use  test:/^jquery$/,expose-loader?$
 *          loader  test:/^jquery$/,expose-loader?$
 *          use+loader  use:{loader:'expose-loader' //require.resolve('jquery') 拿到模块的路径
 *                                     , options:'$'}
 * 
 *   plugin
 *      插件
 *      1. html-webpack-plugin  html摸版
 *          new HtmlWebpackPligin({
 *              template:'./src/index.html' //摸版的路径
 *              filename:'index.html' //输出的文件
 *              hash:true  //文件hash
 *              minify:{
 *                   removeAttributeQuotes:true
 *               },
 *               chunk:['index'] //引入的模块
 *               title:'hello world' 
 *               //mdzz,<title><%=htmlWebpackPlugin.options.title%></title>
 *          })
 *      2. clean-webpack-plugin //删除没用的文件
 *          new CleanWebpackPlugin([path.join(__dirname,'dist')])
 *      3. new webpack.ProvidePlugin({ //全局引入文件
            $ : 'jquery'
        })
        4.全局中 使用某些公共变量
        let $ = require('expose-loader?!:jquery')  expose 暴露
        引入在入口文件中，首先加载此模块，然后得到模块找到对象。并且挂到window下
        补充 loader的特殊写法
        require('style-loader!css-loader!./index.css') 
        ? 传参  ! 引入前面的
 */

const path = require('path')

const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry : {
        index:'./src/index.js',
        base :'./src/base.js'
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:"[name][hash].js"
    },
    module:{
        rules:[
            {test:/\.css$/,
            loader:['style-loader','css-loader']}
        ]
    },
    plugins:[
        new webpack.ProvidePlugin({
            $ : 'jquery'
        }),
        new CleanWebpackPlugin([path.join(__dirname,'dist')]),
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            hash:true,
            filename:'index.html',
            // minify:{
            //     removeAttributeQuotes:true
            // },
            chunk:['index']
            title:'hello world'
            //mdzz,<title><%=htmlWebpackPlugin.options.title%></title>
        })
        new HtmlWebpackPlugin({
            template:'./src/base.html',
            hash:true,
            filename:'base.html',
            minify:{
                removeAttributeQuotes:true
            },
            chunk:['base']
            title:'hello world'
            //mdzz,<title><%=htmlWebpackPlugin.options.title%></title>
        })
    ],
    devServer:{
        devServer:{
            contentBase:'./dist', //文件夹  可以访问该文件下的所有文件
            host:'localhost' ,//主机
            port:8092, //默认8080
            compress:false,//服务器返回给浏览器的时候是否启动gzip压缩       
        }
    }
    /**
     * "scripts": {
            "build": "webpack-dev-server --open --mode development",
            "dev": "webpack-dev-server --open --mode development"
        },
     */
}