webpack随手笔记

·  阅读 164

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,//热替换的端口号 }
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改