学习笔记--Webpack

 一、Webpack基本使用--安装和配置

① 新建一个空目录并进入该目录，执行命令 npm init -y 来初始化 package.json 包管理配置文件.

② 执行命令 npm install webpack webpack-cli -D  来安装相关包

③ 在项目根目录中创建名为 webpack.config.js 的配置文件， 该配置文件初始化内容如下：

// webpack.config.js

module.exports={
    mode: 'development' //开发模式 development, 生产模式 production
}

 ④在 package.json 配置文件中的 scripts 节点中，增加dev脚本 如下:

  "scripts": {
    "dev" : "webpack" 
  },

 ⑤ 在根目录下新建一个src的目录，同时在该目录下创建一个 index.js 的文件，文件内容可以为空

 ⑥ 在终端运行 npm run dev 命令，启动webpack进行项目打包.

 

 二、Webpack基本使用--配置打包的入口与出口

// webpack.config.js
const path = require('path')    //导入node.js中操作路径的模块

module.exports={
    mode: 'development', //开发模式 development, 生产模式 production

    entry: path.join(__dirname,'src/index.js'),    //打包入口文件路径

    output:{
        path: path.join(__dirname,'dist'),        //输出文件的路径
        filename: 'bundle.js'                     //输出文件的名称
    }
}

  

三、Webpack基本使用--配置自动打包

　　① 执行命令 npm install webpack-dev-server -D 

       ② 在 package.json 配置文件中的 scripts 节点中，修改dev脚本 如下:

  "scripts": {
    "dev" : "webpack-dev-server" 
  },

     ③ 在src目录下新建一个index.html文件，index.html文件中引入 <script src="/bundle.js"></script>

      该bundle.js文件是看不见的，它是在内存中的文件.

     ④ 在终端运行 npm run dev 命令，启动webpack进行项目自动打包.

     ⑤若访问链接 http://localhost:8080/ 报错 Cannot GET / ，则需要在 webpack.config.js中增加devServer的如下配置内容：

// webpack.config.js
const path = require('path')    //导入node.js中操作路径的模块

module.exports={

    mode: 'development', //开发模式 development, 生产模式 production

    entry: path.join(__dirname,'src/index.js'),    //打包入口文件路径

    output:{
        path: path.join(__dirname,'dist'),        //输出文件的路径
        filename: 'bundle.js'                       //输出文件的名称
    },

     // webpack4.0版本不需要加，webpack5.0版本必须加才行
    devServer: {
        static: {
          directory: path.join(__dirname, "/"),
        },
      }
    
}

 

四、Webpack基本使用--配置html-webpack-plugin生成预览页面

　　① 执行命令 npm install html-webpack-plugin -D  安装生成预览页面的插件

       ② 修改 webpack.config.js 的配置文件，在该文件的头部区域添加如下内容：

       ③ 修改 webpack.config.js 的配置文件, 在module.exports里面增加 plugins的配置

// webpack.config.js
const path = require('path')    //导入node.js中操作路径的模块

const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({  //创建插件的实例对象
    template: 'src/index.html',     //指定要用到的模板文件，即要复制的首页文件
    filename: 'index.html'          //指定生成的文件名称，该文件存在于内存中
})

module.exports={

    ...忽略其它内容...

      plugins: [htmlPlugin]   //plugins数组是webpack打包用到的一些插件列表

    
}

     ④  在终端运行 npm run dev 命令，启动webpack进行项目自动打包

 

五、Webpack基本使用--配置自动打包相关参数

　　① 在package.json文件的 script 中

       ②  --open 表示自动打开浏览器 --host 配置IP  --port 配置端口

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8288 --host 127.0.0.1 "
  },

       ③ 在终端运行 npm run dev 命令，启动webpack进行项目自动打包

　

六、Webpack基本使用--通过loader打包非js模块

 

　　在实际开发中，webpack默认只能打包以.js结尾的模块，其它非.js的模块无能为力，此时需要调用loader加载器才能正常打包

　　loader加载器可以协助webpack打包处理特定的文件模块。

     处理css结尾的文件

       ① 执行命令 npm install style-loader css-loader -D  安装加载器

       ② 修改 webpack.config.js 的配置文件，在module.exports里面增加 module 的配置

// webpack.config.js
...忽略其它内容

module.exports={
     ...忽略其它内容
    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader']}  //它会处理以css结尾的文件，同时从该数组配置的两个loader的右边loader往左边执行
        ]
    }
    
}

        ③ 在src目录下新建测试文件 123.css ，写一个简单的样式如 

           body{

               background-color: pink;

            }

       ④  在index.js中引入该样式文件  import ‘./123.css’

       ⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包.

 

     处理less结尾的文件

       ① 执行命令 npm install less-loader less -D  安装加载器

       ② 修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中增加配置项

// webpack.config.js
...忽略其它内容

module.exports={
    ... 忽略其它内容
    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
        ]
    }
    
}

   ③ 在src目录下新建测试文件 123.less ，写一个简单的样式如    

   body{

             margin: 0;

            padding: 0;

       }

       ④  在index.js中引入该样式文件  import ‘./123.less’

       ⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包.

　

     处理scss结尾的文件

       ① 执行命令 npm install sass-loader node-sass -D  安装加载器

       ② 修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中增加配置项

// webpack.config.js
...忽略其它配置

module.exports={
   ...忽略其它配置
    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
        ]
    }
    
}

 

   ③ 在src目录下新建测试文件 123.scss ，写一个简单的样式如     

 body{

         background-color: #666;

      }

       ④  在index.js中引入该样式文件  import ‘./123.scss'

       ⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包.

　

  配置postCSS自动添加css的兼容前缀

       ① 执行命令 npm install postcss-loader autoprefixer -D  安装加载器

       ② 在项目根目录新建 postcss.config.js 的配置文件，内容：

// postcss.config.js

const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件

module.exports={

    plugins: [autoprefixer]   //挂载插件

  
}

     ③ 在src目录下修改测试文件 123.css ，写如下样式     

　　::placeholder{

        　　 color: red;

       }

       在src/index.html中body里面增加  <input type = 'text' placeholder='test' />

 

        ④  修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中的.css里面追加

// webpack.config.js
...忽略其它配置

module.exports={
   ...忽略其它配置
    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
        ]
    }
    
}

       ⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包

       ⑥ 在不同的浏览器中观察效果是否一致

　

 打包样式表中的图片或字体文件

       ① 执行命令 npm install url-loader file-loader -D  安装加载器

       ② 在src目录下修改测试文件 123.css ，写如下样式     

　　#test{

           with:300px;

            height:200px;

            backgroud: url(../images/1.jpg)

          }

       ③在src/index.html中body里面增加  <div id="test"></div> , 同时注意 新建 images目录并放置1.jpg图片

 

        ④  修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中的追加配置

// webpack.config.js
...忽略其它配置项

module.exports={

   ...忽略其它配置项

    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
            //当图片大小小于limit指定值(byte)则会被转成base64图片
            {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=102400'} 
        ]
    }
    
}

       ⑤ 在终端运行 npm run dev 命令，启动webpack进行项目打包

    　

打包JS文件中的高级语法

       ① 执行命令 npm install babel-loader @babel/core @babel/runtime -D  安装babel转换器相关包

       ② 执行命令 npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties   -D  安装babel语法插件相关包  

       ③在根目录创建babel的配置文件 babel.config.js ,内容如下：

 

// babel.config.js

module.exports={

    presets: ['@babel/preset-env'], //语法包
    plugins: ['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']   //挂载插件

}

        ④  修改 webpack.config.js 的配置文件，在module.exports里 module 的 rules中的追加配置

// webpack.config.js
 ...忽略其它配置

module.exports={

   ...忽略其它配置

    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
            //当图片大小小于limit指定值(byte)则会被转成base64图片
            {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=102400'} ,
             ///node_modules目录下的是第三方包的不是我们写的代码必须排除掉
            {test: /\.js$/, use: 'babel-loader', exclude:/node_modules/} ,
        ]
    }
    
}

      ⑤  在src/index.js中写一个测试代码

　　　　class Person{

   　　　　　　 static info = 'aaa'

　　　　};

　　　　console.log(Person.info);

      ⑥  在终端运行 npm run dev 命令，启动webpack进行项目打包.

 

配置vue组件的加载器

       ① 执行命令 npm install vue-loader vue-template-compiler -D  安装相关包

       ② 在webpack.config.js中添加如下配置 

// webpack.config.js
...忽略其它配置

const VueLoaderPlugin = require('vue-loader/lib/plugin')    //vue插件

module.exports={

  ...忽略其它配置

    plugins: [htmlPlugin,new VueLoaderPlugin()],   //plugins数组是webpack打包用到的一些插件列表

    module:{
        rules:[
            {test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
            //当图片大小小于limit指定值(byte)则会被转成base64图片
            {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=102400'} ,
             ///node_modules目录下的是第三方包的不是我们写的代码必须排除掉
            {test: /\.js$/, use: 'babel-loader', exclude:/node_modules/} ,
            {test: /\.vue$/, use: 'vue-loader'} 
        ]
    }
    
}

       ③ 在src/index.js文件中 引入.vue文件 ，如 

            import App from './components/App.vue'

       ④  在终端运行 npm run dev 命令，启动webpack进行项目打包.

 

六、Webpack基本使用--VUE文件

　　①  vue 单文件由3部分组成 template组件的模板区域 script业务逻辑区域  style样式区域

       ②  编写一个.vue文件示例 注意在VSCode中安装插件 Vetur 这样编辑器才能识别和提示vue文件

<template>
    <div>
        <h3>这是App.vue的组件</h3>
    </div>
</template>

<script>

export default{

    data(){
        return {

        }
    },
    methods:{

    }
}
 
</script>

<style scoped>
    h3{
        color:red;
    }
</style>

 ③ 注意在当前项目根目录下的终端运行 npm install vue -S  来安装vue

 

七、Webpack项目中使用 vue

　　①   npm install vue -S 安装vue

       ②  在src/index.js 入口文件中，通过 import Vue from 'vue' 来导入vue构造函数

       ③  创建vue实例对象，并指定要控制的 el 区域

       ④  通过 render函数 渲染 App 根组件

// src/index.js
//忽略之前其它测试代码


//------------------华丽的分割线------------------------------
import Vue from 'vue'
//导入vue单文件组件
import App from './components/App.vue'

const vm = new Vue({
    el: '#app',

    render: c => c(App)
    
});

    ⑤  在src/index.html 中加上 id为app 的 div

　　　　

 　　　<!-- 将来作为vue的控制区域 -->

    　　<div id="app">

        

   　　 </div>

    ⑥  在终端运行 npm run dev 命令，启动webpack进行项目打包.

      

八、Webpack打包发布

　　①   修改项目根目录下的 package.json文件

       ②  在script中增加 build脚本

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8288 --host 127.0.0.1 ",
    "build": "webpack "
  },

     ③  在终端运行 npm run build 命令，webpack进行项目打包.，生成的文件在dist目录下.

     注意: 这个是最简单的打包发布

 

 

附 package.json

 

{
  "name": "02_webpack_gehangbianse_New",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8288 --host 127.0.0.1 ",
    "help": "webpack --help",
    "build": "webpack "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-transform-runtime": "^7.16.8",
    "@babel/preset-env": "^7.16.8",
    "@babel/runtime": "^7.16.7",
    "autoprefixer": "^10.4.2",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "node-sass": "^7.0.1",
    "postcss-loader": "^6.2.1",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.66.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.3"
  },
  "dependencies": {
    "vue": "^2.6.14"
  }
}