webpack4.X(入门到入土)

2024-02-16 09:54:04

Learning webpack

安装webpack

npm init -y//建立默认手脚架
npm install webpack webpack-cli --save-dev

Demo

1.在根目录建立两个文件夹(src文件夹和dist文件夹)

src文件夹：用来存放javascript代码，可以简单的理解为用JavaScript编写的模块。

dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。

2.编写程序文件

(1)在dist文件下手动建立一个index.html文件(/dist/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack</title>
</head>
<body>
    <div id="title"></div>
    <!-- bundle.js是webpack执行打包命令后生产的文件。 -->
    <script src="./main.js"></script>
</body>
</html>

(2)在src文件夹下建立entery.js的文件用于编写JavaScript代码，也是入口文件(src/index.js)

document.getElementById('title').innerHTML='Hello Webpack';

3.Webpack打包输出

终端（命令行）中输入

npx webpack

将会在./dist把编译结果输出为main.js (没有 webpack.config.js 的默认配置)

目录结构:

|-- ./dist                        // 最终使用代码
|-- ./node_modules                // 各个依赖开发包
|-- ./src                         // 源文件
|-- ./package.json                // 配置脚手架

入口与出口

1.在项目根目录下创建webpack.config.js(webpack配置文件)

//写入 webpack 配置文件
const path = require('path') 
module.exports={
    //入口文件的配置项(可以是单一入口，也可以是多入口)
    entry:{
       //里面的entery是可以随便写的
       main:'./src/index.js'
    },

    //出口文件的配置项(支持多出口配置)
    output:{
       //打包的文件名称
       filename: 'bundle.js',
       //打包的路径位置
       //path.resolve(__dirname,’./dist’)就是获取了项目的绝对路径。
       path: path.resolve(__dirname, './dist') 
    },

    //模块：例如解读CSS,图片如何转换，压缩
    module:{},

    //插件，用于生产模版和各项功能
    plugins:[],

    //配置webpack开发服务功能
    devServer:{}
}

终端（命令行）中输入

npx webpack

2.多入口、多出口配置

(1)src目录下新建index1.js(src/index1.js)

alert('welcome to jsfan.net')

(2)修改项目根目录下webpack.config.js为

//写入 webpack 配置文件
const path = require('path') 
module.exports={
    //入口文件的配置项(可以是单一入口，也可以是多入口)
    entry:{
       //里面的entery是可以随便写的
       main:'./src/index.js',
       //增加入口文件
       index1:'./src/index1.js'
    },

    //出口文件的配置项(支持多出口配置)
    output:{
    //多出口打包的文件名称(修改后)
    //[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
    filename:'[name].js',
       
    //打包的路径位置
       //path.resolve(__dirname,’./dist’)就是获取了项目的绝对路径。
       path: path.resolve(__dirname, './dist') 
    },

    //模块：例如解读CSS,图片如何转换，压缩
    module:{},

    //插件，用于生产模版和各项功能
    plugins:[],

    //配置webpack开发服务功能
    devServer:{}
}

(3)终端（命令行）中输入

npx webpack

(4)在dist文件中index.html中引入

<script src='./index1.js'></script>

热更新

1.安装 webpack-dev-server

npm install webpack-dev-server --save-dev

2.配置webpack.config.js中的devServer为

devServer:{
  //服务器的IP地址，可以使用IP也可以使用localhost 
  host:'localhost',
  //配置服务端口号
  port:'8080',
  //自动打开浏览器
  open:true,
  //热加载
  hot:true,
  //服务端压缩是否开启
  compress:true,
}

3.修改webpack.config.js

(1).引入webpack

const webpack=require('webpack');

(2).修改plugins

plugins:[
       //热更新插件
       new webpack.HotModuleReplacementPlugin()
],

(3).向output中添加publicPath

output:{
   publicPath:'/dist',//必须加publicPath
   filename:'[name].js',  
   path: path.resolve(__dirname, './dist') 
},

4.修改package.json

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

5.运行(终端中输入)

npm run server

注释:

运行出现Cannot find module 'webpack-cli/bin/config-yargs’时

npm install webpack-cli//(重新运行)

运行出现Cannot find module 'webpack’时

npm i webpack -D//(重新运行)

CSS文件打包

1.安装style-loader与css-loader

npm i style-loader css-loader -D

2.配置webpack.config.js中的module为

module:{
   rules:[
     {    //css使用
       test:/\.css$/, //用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
       use:[ //loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错
        'style-loader', 
        'css-loader'
       ],
       //include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
       //query：为loaders提供额外的设置选项（可选）
     }
   ]
},

3.在src中新建css文件夹且创建index.css(src/css/index.css)

body{
background-color: red;
color: white;
}

4.在src中index.js内引用(src/index.js)

import './css/index.css'

5.运行

npm run server

打包HTML文件

1.安装html-webpack-plugin

npm install --save-dev html-webpack-plugin

2.在webpack.config.js中引入

const htmlPlugin= require('html-webpack-plugin')

3.配置webpack.config.js中的plugins为

plugins:[
       //热更新插件
       new webpack.HotModuleReplacementPlugin(),
       //打包HTML插件
       new htmlPlugin({
        minify:{ //对html文件进行压缩
            removeAttributeQuotes:true //removeAttrubuteQuotes去掉属性的双引号
        },
        hash:true, //开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS
        template:'./src/index.html' //要打包的html模版路径和文件名称
        })
],

4.在src目录下新建index.html(src/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <div id='title'></div>
</body>
</html>

5.删除dist目录且重新打包

npx webpack

CSS中的图片处理

1.安装file-loader与url-loader

npm install --save-dev file-loader url-loader

2.修改src目录下index.html(src/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <div id='tupian'></div>
    <div id='title'></div>
</body>
</html>

3.修改src->css目录下index.css(src/css/index.css)

body{
    background-color: red;
    color: white;
}
#tupian{
    /* 此处图片与文件路径自行创建 */
    background-image: url(../images/全局npm.png);
    width:500px;
    height:500px;
}

4.配置webpack.config.js中的module为

   rules:[
     {    //css使用
       test:/\.css$/, //用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
       use:[ //loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错
        'style-loader', 
        'css-loader'
       ],
       //include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
       //query：为loaders提供额外的设置选项（可选）
     },
     {    //css中图片使用
        test:/\.(png|svg|jpg|gif)$/,
        use:[{
           loader:'url-loader',
           options:{
               //大于此大小则打包成图片
               limit:500000 //把小于500000B的文件打成Base64的格式，写入JS
           }
        }]
    },
   ]

5.打包且检验

npx webpack
npm run server

处理HTML中的图片

1.安装html-withimg-loader

npm install html-withimg-loader --save

2.配置webpack.config.js中的module为

module:{
   rules:[
     {    //css使用
       test:/\.css$/, //用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
       use:[ //loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错
        'style-loader', 
        'css-loader'
       ],
       //include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
       //query：为loaders提供额外的设置选项（可选）

     },
     {    //css中图片使用
        test:/\.(png|svg|jpg|gif)$/,
        use:[{
           loader:'url-loader',
           options:{
               limit:500, //把小于500B的文件打成Base64的格式，写入JS 大于此大小则打包成图片
               outputPath:'images/', //输出的文件夹 大于此大小则打包成图片输出
              
               esModule:false //html-webpack-plugin与html-withimg-loader发生了冲突解决方法
              }
        }]
    },
    {   //将html与htm中的img打包出来
     test: /\.(htm|html)$/i,
      use:[ 'html-withimg-loader'] 
    },
   ]
},

注:file-loader升级到5.0了，所以需要在file-loader的options里使用一个配置:esModule:false(url-loader包含file-loader大多功能)

3.向src目录下的index.html中增加(图片自行添加)

<div><img src="images/孤独.png" alt=""></div>

4.打包及热更新

npx webpack
npm run server

Less文件的使用与打包

1.安装Less

npm install --save-dev less

2.在原有的基础上安装less-loader(原有基础:style-loader css-loader)

npm n install --save-dev less-loader

3.向webpack.config.js中的module增添

{   
     test:/\.less$/,
     use:[
          'style-loader',   
          'css-loader',
          'less-loader',   
          ]
},

4.编写black.less(/css/black.less)

@base :#000;
#gogo{
    width:300px;
    height:300px;
    background-color:@base;
}

5.引入到index.js文件中

import './css/black.less'

6.打包及热更新

npx webpack
npm run server

Sass文件的使用与打包

1.安装Sass

npm install --save-dev node-sass

2.在原有的基础上安装sass-loader(原有基础:style-loader css-loader)

npm install --save-dev sass-loader

3.向webpack.config.js中的module增添

{
    test: /\.scss$/,
    use:[
      'style-loader',   
      'css-loader',
      'sass-loader',   
    ]
}

4.编写Sass.scss(/css/Sass.scss)

$nav-color: #FFF;
#nav {
  $width: 100%;
  width: $width;
  height:30px;
  background-color: $nav-color;
}

5.引入到index.js文件中

import './css/Sass.scss'

6.打包及热更新

npx webpack
npm run server

css代码分离

1.安装mini-css-extract-plugin

npm install mini-css-extract-plugin -D

2.向webpack.config.js中增添

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

2.向webpack.config.js中的module增添

{ 
       test: /\.css$/i,
       use: [
           {
              loader: MiniCssExtractPlugin.loader,
              options: { //解决打包后背景图丢失问题
                 publicPath: '../',
               },
            },
            'css-loader',
       ],
},

3.向webpack.config.js中的plugins增添

new MiniCssExtractPlugin({ //css分离
           filename: 'style/[name].css',// 分离后的文件名
           chunkFilename: '[id].css',
           ignoreOrder: false//启用可删除有关顺序冲突的警告 
}),

4.打包及热更新

npx webpack
npm run server

自动处理css前缀兼容不同浏览器

1.安装postcss-loader 和autoprefixer(自动添加前缀的插件)

npm install --save-dev postcss-loader autoprefixer

2.在项目根目录，建立postcss.config.js文件且写入

module.exports = {
	plugins:[
    require('autoprefixer')({
        browsers : ['last 100 versions']//必须设置支持的浏览器才会自动添加添加浏览器兼容
        //> 1%       //  浏览器的市场占有 得超过 百分之1
        //last 2 versions   // 浏览器的最后俩个版本
    })
 ]
}

3.修改webpack.config.js中的module为

     { 
        test: /\.css$/i,
        use: [
           {
              loader: MiniCssExtractPlugin.loader,
              options: { //解决打包后背景图丢失问题
                 publicPath: '../',
               },
            },
            'css-loader',
            'postcss-loader'
        ],
      },

4.打包及热更新

npx webpack
npm run server

5.打包效果展示

    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
       -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
            box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);

消除未使用的CSS

1.安装purify-css和PurifyCSS-webpack

npm  i -D purifycss-webpack purify-css

2.在webpack.config.js中引入

const glob = require('glob');
const PurifyCSSPlugin = require('purifycss-webpack');

3.向webpack.config.js中的plugins增添

new PurifyCSSPlugin({              
    // 首先保证找路径不是异步的,所以这里用同步的方法
    // path.join()也是path里面的方法,主要用来合并路径的
    // 'src/*.html' 表示扫描每个html的css
    paths: glob.sync(path.join(__dirname, 'src/*.html')),
})

4.打包及热更新

npx webpack
npm run server

集成babel支持

1.安装babel-loader、babel-core、babel-preset-env

npm install -D babel-loader babel-core babel-preset-env

注:babel-loader安装最新版本后博主出现打包错误

package.json中更改其版本为"^7.0.0"后恢复正常

2.在项目根目录下创建.babelrc文件且输入

{
"presets": ["env"]
}

3.向webpack.config.js中的module增添

{ 
    test: /\.js$/,
    exclude: /node_modules/, 
    loader: "babel-loader"
}

4.向js文件中增添es6语法

5.打包及热更新

npx webpack
npm run server

开启打包调试

向webpack.config.js中entry的同级目录增添

//开发者模式 可调错
devtool:'source-map',
//开启调试功能,上线之前需将此行注释

1.source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；

2.cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。

3.eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。

4.cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。

上述选项由上到下打包速度越来越快，同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。

引入第三方库

1.安装JQuery

npm install --save jquery

2.向index.js文件中增添

import $ from 'jquery';

3.当前文件中使用JQ

watch自动打包

运行watch

npx webpack --watch

码农公寓

Learning webpack

安装webpack

Demo

1.在根目录建立两个文件夹(src文件夹和dist文件夹)

src文件夹：用来存放javascript代码，可以简单的理解为用JavaScript编写的模块。

dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。

2.编写程序文件

(1)在dist文件下手动建立一个index.html文件(/dist/index.html)

(2)在src文件夹下建立entery.js的文件用于编写JavaScript代码，也是入口文件(src/index.js)

3.Webpack打包输出

终端（命令行）中输入

将会在./dist把编译结果输出为main.js (没有 webpack.config.js 的默认配置)

目录结构:

入口与出口

1.在项目根目录下创建webpack.config.js(webpack配置文件)

终端（命令行）中输入

2.多入口、多出口配置

(1)src目录下新建index1.js(src/index1.js)

(2)修改项目根目录下webpack.config.js为

(3)终端（命令行）中输入

(4)在dist文件中index.html中引入

热更新

1.安装 webpack-dev-server

2.配置webpack.config.js中的devServer为

3.修改webpack.config.js

(1).引入webpack

(2).修改plugins

(3).向output中添加publicPath

4.修改package.json

5.运行(终端中输入)

注释:

运行出现Cannot find module 'webpack-cli/bin/config-yargs’时

运行出现Cannot find module 'webpack’时

CSS文件打包

1.安装style-loader与css-loader

2.配置webpack.config.js中的module为

3.在src中新建css文件夹且创建index.css(src/css/index.css)

4.在src中index.js内引用(src/index.js)

5.运行

打包HTML文件

1.安装html-webpack-plugin

2.在webpack.config.js中引入

3.配置webpack.config.js中的plugins为

4.在src目录下新建index.html(src/index.html)

5.删除dist目录且重新打包

CSS中的图片处理

1.安装file-loader与url-loader

2.修改src目录下index.html(src/index.html)

3.修改src->css目录下index.css(src/css/index.css)

4.配置webpack.config.js中的module为

5.打包且检验

处理HTML中的图片

1.安装html-withimg-loader

2.配置webpack.config.js中的module为

注:file-loader升级到5.0了，所以需要在file-loader的options里使用一个配置:esModule:false(url-loader包含file-loader大多功能)

3.向src目录下的index.html中增加(图片自行添加)

4.打包及热更新

Less文件的使用与打包

1.安装Less

2.在原有的基础上安装less-loader(原有基础:style-loader css-loader)

3.向webpack.config.js中的module增添

4.编写black.less(/css/black.less)

5.引入到index.js文件中

6.打包及热更新

Sass文件的使用与打包

1.安装Sass

2.在原有的基础上安装sass-loader(原有基础:style-loader css-loader)

3.向webpack.config.js中的module增添

4.编写Sass.scss(/css/Sass.scss)

5.引入到index.js文件中

6.打包及热更新

css代码分离

1.安装mini-css-extract-plugin

2.向webpack.config.js中增添

2.向webpack.config.js中的module增添

3.向webpack.config.js中的plugins增添

4.打包及热更新

自动处理css前缀兼容不同浏览器

1.安装postcss-loader 和autoprefixer(自动添加前缀的插件)