webpack随手笔记

webpack的做用

webpack是一个前端资源加载/打包工具。他将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。

webpack的安装与基本命令

• 安装命令npm install webpack-cli-g
• 基本使用命令webpack 输入文件.js -o 输出文件.js
  • 默认输出是生产模式，webpack打包的文件是最小的，若是须要打包开发模式则须要设置mode，命令webpack --mode development 输入文件.js -o 输出文件.js
  • 若是不设置输入输出文件，则会默认在输入文件是src下的index.js文件，输出是dist文件下的main.js
• 开发环境命令
  • 当项目逐渐变大，webpack的编译时间会变长，能够经过参数让编译的输出内容带有进度和颜色;命令webpack --progress --colors
  • 若是不想每次修改模板后都从新编译，那么能够启动监听模式，没有变化的模块编译后缓存到内存中，而不会每次都从新编译；命令：webpack --watch

webpack的基础配置

//打包单个文件
const path = require ('path')
module.exports = {
	entry:'index.js',//入口文件
    output:{
    	path:path.resolve(__dirname,'dist),
        filrname:'output.bundle.js'
    },//出口文件
    mode:'development'//设置开发模式或生产模式
}
//打包多个文件
module.exports = {
	entry:{
    	about:'./about.js',
        home:'./home.js',
    }
    output:{
    path:path.resolve(__dirname,'dist'),
    filrname:[name].bundle.js
    }
}
复制代码

加载器(loaders)

webpack自己只能处理JavaScript模块，若是须要处理其余类型的文件就须要用到loader;loader是用来预处理源文件的，源文件多是ts、less、sass等等。

• url-loader;压缩编译图片，文件的大小低于指定限制时，会返回一个DataUrl

//先安装file-loader和url-loader
npm install file-loader url-loader
//安装成功后配置webpack，在webpack.config.js文件中，建立module对象，配置rules
const path = require ('path')
module.exports = {
	entry:'index.js',//入口文件
    output:{
    	path:path.resolve(__dirname,'dist),
        filrname:'output.bundle.js'
    },//出口文件
    mode:'development'//设置开发模式或生产模式
    module:{
    	rules:[
        	{
            	test:/\.(png|gif|jpg)$/i,
                use:[
                	{
                    	loader:'url-loader',
                        options:{
                        	limit:708192
                        }
                    }
                ]
            }
        ]
    }
}
//最后运行打包命令
webpack
复制代码

• 若是咱们须要在应用中添加css文件，就须要使用到css-loader和style-loader，css-loader会遍历css文件，而后找到url表达式处理他们，style-loader会把原来的css代码插入页面中的一个style中，他们两个是配合使用的。
  • 安装css-loader和style-loader、
  • npm install css-loader style-loader
  • 使用css-loader和style-loader

  //先建立一个css文件；
  body{
  	background:yellow
  }
  //建立一个js文件，并引入上面的css文件
  require(!style-loader!css-loader!./style.css)
  //接下来使用命令进行打包
  webpack index.js bundle.js
  
  //咱们也能够根据模型拓展名来自动绑定loader
  //引入文件时，正常写
  require('./style.css')
  //打包时输入时，输入命令
  webpack index.js bundle.js --module-bind 'css=!style-loader!css-loader'
  复制代码

• 将es5以上的代码编译成es5，更方便浏览器识别，使用babel-loader
  • 安装命令npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
  • 配置webpack.config.js文件

  复制代码

{ test:/.(js|jsx)$/, exclude:/(node_modules|bower_components)/,//排除匹配这些文件 use:{ loader:'babel-loader', options:{ presets:['@babel/preset-env'], plugins: [require('@babel/plugin-transform-object-rest-spread')]//设置规则，若是是react则须要编译jsx 语法，这里则写@babel/plugin-transform-react-jsx } } }

- 将less编译成浏览器识别的css
- 安装命令`npm install style-loader css-loader less-loader`
复制代码

//先建立一个less文件 body{ color:'#ffffff' } //引入less文件 import cs from './cs.less' //配置文件 { test:'/.less$/, use:[ { loader:'less-loader', }, { loader:'style-loader' }, { loader:'css-loader' } ] } //使用webpack命令进行打包 webapck

# 插件
## miniCssExtractPlugin，将所有的css文件打包到一个css文件中，实现js和css的分离。
- 安装命令`npm install mini-css-extract-plugin`
复制代码

//引入配置文件 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //在module的同级文件下建立plugins数组 plugins：[ new MiniCssExtractPlugin({ filename:'[name].css, chunckFilename:'[id].css' }) ] //而后将less里的配置进行更改 { test:/.less$/, use:[ MiniCssExtractPlugin.loader, "css-loader", "less-loader" ] } //执行webpack命令，dist文件中会生成一个单独的css文件

## DefinePlugin，通常用来定义请求的地址的前缀
复制代码

//配置文件，引入webpack const webpack = reqiure('webpck') //在plugins中建立一个 new webpack.DefinePlugin({ 'SERVICE_URL':'www.sina.com' }) //在home.js文件中更改一下数据 async function sayHello (){ const result = await fetch(SERVICE_URL) console.log(result) } sayHello() //执行一些webpack，去bundle.js查看会发现SERVICE_URL变成了www.sina.com

## HtmlWebpackPlugin用于生成html文件，webpack主要是用来处理js文件的，当须要生成html文件时须要借助这个插件。
复制代码

//首先 安装html插件 npm install html-webpack-plugin -D //接着 配置文件，在plugins中建立一个 new HtmlWebpackPlugin({ title:'Hello world',//项目标题 template:'template.html',//自定义绑定的html，如若没有定义会自动在dist文件下生成一个html文件 }) //手动建立一个template.html

<%= htmlWebpackPlugin.options.title %>//绑定上面设置的标题 //能够引进其余的框架连接

//自定义标签 ``` ## 热替换 页面改变webpack自动打包，页面实时更新 ``` //首先 安装devServer插件 npm install webpack-dev-server //其次 在entry同级的文件下建立一个devServer对象，并配置 devServer:{ contentBase:path.join(__dirname,'dist'),//热替换的文件，这里的参数和entry必须保持一致 compress:true,//是否压缩 hot:true,//开启热替换 port:8080,//热替换的端口号 }

复制代码