这是我参与「第四届青训营」笔记创作活动的的第17天

一.文件夹

根目录下创建文件夹src 源代码都放在此
src文件夹下新建文件夹assets 可放图片字体文件等
根目录下新建webpack.config.js
根目录下放页面小图标 favicon.ico
src文件夹下创建index.html 、index.js、style.css 、style.less等源文件
dist文件夹自动生成。放输出文件

二、安装

npm install webpack@4.32.2 webpack-cli@3.3.11 安装打包工具

npm init -y 初始化自动生成package.json文件等
npm install html-webpack-plugin@4.5.2 安装html文件打包插件
npm install webpack-dev-server@3.11.2 自动加载页面，修改代码后浏览页面自动更新
在package.json文件加入：


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

执行打包：npm run build 或 npm start 会自动生成dist文件夹 dist文件夹下含新生成的bundle.js index.html等。

执行webpack-dev-server：npm run dev 打开浏览器可实时修改代码实时更新修改

退出webpack-dev-server: ctrl + c

webpack.config.js 加入：

 devServer: {
        contentBase: './dist',
        port: 3000,
        host: '127.0.0.1',
        overlay: { errors: true },
        open: true,
        hot: true//设置模块热更新
    },

5.css文件、less配置

 npm install style-loader@2.0.0 npm install css-loader@5.0.2  安装css插件

6.npm install file-loader@6.2.0 安装file-loader 可配置图片字体等

7.npm install url-loader@4.1.1 安装图片优化插件

8.npm install less-loader@4.1.0 安装less-loader

9.npm install clean-webpack-plugin@4.0.0 清理dist插件

10.模块热更新

module.exports = {
  devServer:{
    ...,
    hot:true
  }
}

//index.js
if(module.hot){
  module.hot.accept('./login.js',function(){
    console.log('login模块发生了变化')
  })
}

三、代码详情

webpack.config.js：

//webpack.config.js 文件设置
const path = require('path')  // 导入内置的path模块，用于处理文件路径
const HtmlWebpackPlugin = require('html-webpack-plugin')//加载html
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');//检测
const Clean =require('clean-webpack-plugin')
 

module.exports = {// 导出当前配置给WebPack打包器
    entry: {//入口
        index: './src/index.js',
    },
    output: {//出口
        filename: 'bundle.js', //单个出口的文件名
        path: path.resolve(__dirname, './dist'),// 出口的位置在dist文件夹中
    },
    mode: 'development',
    devServer: { // 配置webpack-dev-server
        contentBase: './dist',
        port: 3000,
        host: '127.0.0.1',
        overlay: { errors: true },
        open: true,
        hot: true //热模块
    },
    module: {//模块
        rules: [
            {
                test: /\.(css|less)$/, // 匹配所有css或less文件
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/, // 处理自定义字体
                use: ['file-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/, // 匹配图片文件
                use: [
                    {
                        loader: 'url-loader', // 图片加载优化
                        options: {
                            limit: 8192, // 如果图片小于8KB,自动转成base64,不会存实体图片
                            outputPath: 'images/' //图片大于8kb,则借助file-loader保存实体图片
                        }
                    }
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '练习',
            filename: 'index.html',//生成的文件名
            inject: 'body',//js标签引入位置
            favicon: './favicon.ico',//网页小图标
            // chunks: ['index'],//引入index.bundle.js
            template: './src/index.html',//设置页面模板
            minify: {//压缩
                removeAttributeQuotes: false,//移除属性的引号
                removeComments: false,//清理html注释
                collapseWhitespace: false//清理空格、换行符
            }
        }),
        // new BundleAnalyzerPlugin() 检测,
        new Clean.CleanWebpackPlugin() // 清理dist目录(2)
 
    ]
}

index.js:

import { sing } from './login' // 引入login.js
sing()
 
import './style.css'
// import './style.less';
 
import imgsrc from './assets/01.png'
import imgsrc2 from './assets/02.jpeg'
const img = document.createElement('img')
img.src = imgsrc;
document.body.appendChild(img)
 
const img2 = document.createElement('img')
img2.src = imgsrc2;
document.body.appendChild(img2)
 
const span = document.createElement('span');
span.innerHTML = '&#xe648;';
document.body.appendChild(span);
 
// 热模块 修改login.js的才会触发
if (module.hot) {
    module.hot.accept('./login.js', function () {
        console.log('login发生变化');
    })
}

login.js

export function sing() {
    console.log('登录');
}
 package.json
{
  "scripts": { // 手动输入
    "dev": "webpack-dev-server",
    "build": "webpack",
    "start": "webpack"
  },
  // 以下为自动生成 插件及 版本号
  "dependencies": {
    "clean-webpack-plugin": "^4.0.0", //清理dist
    "css-loader": "^5.0.2",//css加载
    "file-loader": "^6.2.0",//文件加载
    "html-webpack-plugin": "^4.5.2",//html 加载
    "install": "^0.13.0",
    "less-loader": "^4.1.0",//less加载
    "npm": "^8.3.2",
    "style-loader": "^2.0.0",//css依赖
    "url-loader": "^4.1.1",//图片优化
    "webpack": "^4.32.2",//打包
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.2"//自动更新 自动打开浏览器
  }
}

style.css:

body {
  background-color: skyblue;
  color: red;
}
@font-face {
    font-family: 'iconfont';
    src: url(./assets/iconfont.ttf) format('truetype');
  }
  span{
    font-family: 'iconfont';
    font-size: 30px;
  }
  img{
      width: 200px;
  }

tips:

npm config set registry registry.npm.taobao.org 淘宝镜像，可加速安装

npm run build、 npm run dev执行后浏览器如下：

生产环境与开发环境的分离

目的：不同的环境有一些专属的配置，我们希望在不同环境下只运行与其环境有关的内容即可。

配置：

新建webpack.common.js、webpack.dev.js、webpack.prod.js 三个文件
将原来的webpack.config.js文件的内容进行拆分，两个环境共用的配置放在webpack.common.js里
webpack.dev.js 只放开发环境的配置,并且设置mode:'development'
webpack.prod.js 只放生产环境的配置,并且设置mode:'production'
安装合并插件：npm install --save-dev webpack-merge
修改package.json文件:不同的命令执行不同环境的配置文件

package.json修改：

"scripts": {
  "build": "webpack --config webpack.prod.js",
  "dev": "webpack-dev-server --config webpack.dev.js"
}

Webpack基础认识|青训营笔记

一.文件夹

二、安装

三、代码详情

生产环境与开发环境的分离