2020-08-25

webpack

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求
npm i html-webpack-plugin -D 页面存在内存中

打包js文件（自动打包）

设置入口和出口

module.exports={
    //手动设置配置文件 entry:path.join(__dirname,'./src/index.js'),//入口文件
    output:{//输出相关配置  
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'//输出文件名字
    },

在配置文件package.json中添加dev，

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack"
    },

需要安装npm install webpack-dev-server -D（自动打包）

    devServer:{
        open:true, //自动打开浏览器
        port:3000,  //设置端口
        contentBase:'src', //指定托管目录
        hot:true  //启用热更新  第一步
    },

安装html-webpack-plugin
不再需要指定启动目录和手动处理bundle.js的引用路径

 plugins:[  //节点插件
        new webpack.HotModuleReplacementPlugin(),//new一个热更新的模块对象，启用热更新第三步
        new htmlwebpackPlugin({
           template:path.join(__dirname,'./src/index.html'),
           filename:'index.html'//指定内存中生成的页面名称
        })
    ],

打包css

如果打包css文件, 需要安装 cnpm i style-loader css-loader -D；在配置文件中, 在里面新增一个 配置节点module, 节点就是一个对象,有个rules属性, 是一个数组, 数组中存放了 所有第三方 文件的匹配和处理规则。

module:{
        rules:[  //所有第三方模块匹配规则
      {test:/\.css$/,use:['style-loader','css-loader']},

        ]
    }

less样式
npm i less --save
npm i less-loader -D 下载less加载器

@width:500px;
@height:500px;

#app{
    width: @width;
    height: @height;
}



 module:{
        rules:[  //所有第三方模块匹配规则
     {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

        ]
    }

scss样式
npm i scss -save
npm i sass-loader -D 下载scss加载器

module:{
        rules:[  //所有第三方模块匹配规则
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },

        ]
    }

处理非js类型的文件, 我们需要手动的 安装一些合适的第三方 loader加载器

打包图片

安装npm i url-loader file-loade -D
配置webpack.config.js

 module:{
  rules:[
     {test: /\.(jpg|png|gif)$/,use:        [{loader: 'url-loader', options: {
                  limit: 8000
              }
          }]
      }
    ]
  }
};

limit 给定的值 是图片的大小,单位是byte, 如果我们引用的图片大于或者等于给定的limit值,则不会被转换为base64, 如果图片小于 给定的 limit的值, 则会被转换为 base64的字符串