Webpack学习笔记【1】

安装

安装本地的webpack

cnpm i webpack webpack-cli -D

---

核心概念

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

---

配置webpack

let path=require('path')

module.exports = {
	//入口  从哪个地方开始打包
	entry: './src/index.js‘，
  //出口
   output:{
   		//加个哈希戳每次都不一样 只显示8位
   		filename:'bundle.[hash:8].js',
       // filename:'bundle.js',//打包后的文件名
       //path.resolve->将相对路径解析为绝对路径(要导入path模块)
       //__dirname 以当前目录为基准 不写也可以
       path:path.resolve(__dirname,'dist'),//放到哪里去，路径是一个绝对路径
   },
}

---

loader

loader可以打包非js文件(.css等 ）
loader有两个属性

• test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
• use 属性，表示进行转换时，应该使用哪个 loader。
  首先要先安装loader

cnpm i css-loader style-loader less-loader -D

 module:{//模块
        //loader
        rules:[
        	//规则 css-loader 解析@import语法
            //style-loader 他是把css插入到head的标签中
            //loader的特点 希望单一
            //loader的用法 字符串只用一个loader
            //多个loader需要一个数组 []
            //loader的顺序 默认是从右向左执行 从下向上
            //loader还可以写成 对象方式
            // {test:/\.css$/,use:['style-loader','css-loader']}, 
             {
                 //还可以处理Less文件
                test:/\.css$/,
                use:[
                {
                    loader:'style-loader',
                    options:{
                        insertAt:'top' //styLe标签插到顶部
                    }
                },
                'css-loader']
            },
            {
                 //还可以处理Less文件 sass stylee node-sass
                test:/\.less$/,
                use:[
                {
                    loader:'style-loader',
                    options:{
                        insertAt:'top' //styLe标签插到顶部
                    }
                //  options:{}
                },
                'css-loader',//@import 解析路径
                'less-loader']//把less->css]
            }
        ]
    }

---

plugins

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

首先仍需要通过npm安装插件

let HtmlWebpackPlugin=require('html-webpack-plugin')

导入插件

let HtmlWebpackPlugin=require('html-webpack-plugin')

简单使用

 plugins:[//数组放着所有的webpack插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',//打包的模板
            filename:'index.html',//输出文件的文件名称，默认为index.html
            minify:{//最小化操作
                removeAttributeQuotes:true,//删除""
                collapseWhitespace:true,//折叠空行
            },
            hash:true//哈希戳
        })
    ]

---

完整代码

let path=require('path')
let HtmlWebpackPlugin=require('html-webpack-plugin')

console.log(path.resolve('dist'))
module.exports={
    devServer:{//开发服务器的配置
        port:2233,//端口号
        progress:true,//进度条
        contentBase:'./dist' ,//作为静态服务的目录,
        compress:true
    },
    mode:'production',//模式 默认是两种production developnment
    entry:'./src/index.js',//入口 从哪个地方开始打包
    //出口
    output:{
        filename:'bundle.[hash:8].js',//加个哈希戳每次都不一样 只显示8位
       // filename:'bundle.js',//打包后的文件名
        //path.resolve->将相对路径解析为绝对路径
        //__dirname 以当前目录为基准 不写也可以
        path:path.resolve(__dirname,'dist'),//放在哪里去，路径不许是一个绝对路径
    },
     module:{//模块
        //loader
       rules:[//规则 css-loader 解析@import语法
            //style-loader 他是把css插入到head的标签中
            //loader的特点 希望单一
            //loader的用法 字符串只用一个loader
            //多个Loader需要一个数组 []
            //loader的顺序 默认是从右向左执行 从下向上
            //loader还可以写成 对象方式
            // {test:/\.css$/,use:['style-loader','css-loader']}, 
             {
                 //还可以处理Less文件
                test:/\.css$/,
                use:[
                {
                    loader:'style-loader',
                    options:{
                        insertAt:'top' //styLe标签插到顶部
                    }
                },
                'css-loader']
            },
            {
                 //还可以处理Less文件 sass stylee node-sass
                test:/\.less$/,
                use:[            
                    loader:'style-loader',
               		 'css-loader',//@import 解析路径
               		  'less-loader'
               	]
               		  //把less->css
            }
        ]
            },
            {
                 //还可以处理Less文件 sass stylee node-sass
                test:/\.less$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',//@import 解析路径
                    'postcss-loader',
                    'less-loader'
                ]//把less->css]
            }
        ]
    },
    plugins:[//数组放着所有的webpack插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            minify:{//最小化操作
                removeAttributeQuotes:true,//删除""
                collapseWhitespace:true,//折叠空行
            },
            hash:true//哈希戳
        })
    ]
    
}