安装webpack

全局安装

yarn global add webpack@4 webpack-cli@3

局部安装（在需要的文件夹安装）

创建一个webpack-demo文件夹
初始化

npm init -y

安装

yarn add webpack@4 webpack-cli@3 --dev
// 查看版本
./node_modules/.bin/webpack --version

配置创建webpack.config.js文件夹

在文件夹里面放入

module.exports = {
// 给开发者看 development
  mode: 'development', 
};

调用webpack

相关配置：点击这里

// 方法一
./node_modules/.bin/webpack   webpack
// 方法二
npx webpack

打包后的文件在文件夹dist 里面的的main.js
在package.json里面添加下面代码，然后快捷 yarn build

"build": "rm -rf dist &&  webpack",

生成HTML代码

// 安装
yarn add html-webpack-plugin --dev

生成CSS

// 安装
yarn add css-loader --dev
// 安装
yarn add style-loader --dev

配置dev-server

// 安装
yarn add webpack-dev-server --dev
// 运行
yarn start

注意他只会在缓存在里面不会创建dist目录

css抽成文件

// 安装
yarn  add mini-css-extract-plugin --dev

在开发时用 yarn start 打包时使用 yarn build

替换 package.json 里面的代码

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "rm -rf dist && webpack  --config  webpack.config.prod.js ",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.1.2",
    "dart-sass": "^1.23.7",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.3.9",
    "sass-loader": "^8.0.0",
    "style-loader": "^2.0.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.11.2"
  }
}

替换 webpack.config.js 代码

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require("path");
const base = require('./webpack.config.base.js')
module.exports = {
    // 将base里面的代码抄过来
    ...base,
    devtool: "inline-source-map",
    devServer: {
        contentBase: "./dist"
    },
    module: {
        rules: [
            ...base.module.rules,
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
};

创建 webpack.config.prod.js 并复制以下代码

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require("path");
const base = require('./webpack.config.base.js')
module.exports = {
    ...base,
    mode: "production",
    plugins: [
        ...base.plugins,
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
            chunkFilename: '[id].[contenthash].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
    ],
    module: {
        rules: [
            ...base.module.rules,
            {
                test: /\.css$/i,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        },
                    },
                    'css-loader',
                ],
            }
        ]
    }
};

创建 webpack.config.base.js 并复制以下代码

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "index.[contenthash].js"
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "XDML - 写代码啦",
            template: "src/assets/index.html"
        })
    ],
    module: {
        rules: [{
                test: /\.(png|svg|jpg|gif)$/,
                use: ["file-loader"]
            },
            {
                test: /\.styl$/,
                loader: ["style-loader", "css-loader", "stylus-loader"]
            },
            {
                test: /\.less$/,
                loader: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.scss$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "sass-loader",
                        options: {
                            implementation: require("dart-sass")
                        }
                    }
                ]
            }
        ]
    }
};

然后执行

yarn install
yarn init

创建一个src目录在里面放入index.js 或者其他的js,css文件。

html文件放入 src目录下的assets目录。里面必须有一个index.html

最后就完成啦

在开发的时候执行 yarn start 提供实时预览效果

在打包的时候执行 yarn build 将JS、CSS分离打包

webpack的作用包括哪些？

将一个或者多个JS文件/CSS文件打包成对应文件
压缩代码
将高版本的JS转译文低版本的JS

loader 和 plugin的区别

loader就是加载器。

plugin就是一个插件来扩展webpack的功能的。

loader用来去load资源文件。例如用来加载js文件，将js文件加载成低版本浏览器可以支持的文件。也可以用来加载css文件将css文件变成页面上的style标签，或者其他处理。

plugin用来加强功能的例如html-webpack-plugin插件用来生成一个html文件的。mini-css-extract-plugin用来抽取css代码，将多个css文件合并成一个css。

webpack引入scss

yarn add sass-loader dart-sass --dev

这里安装的版本可能过高一定要和上面的package.json里面的版本一致。

引入 less

// 安装
yarn add less-loader --dev 
yarn add less --dev

引入 stylus

// 安装
yarn add stylus-loader stylus --dev

引入 img

在index.js里面 import 需要的png 然后在获取要插入的盒子最后引入图片

const div = document.querySelector('#app')
div.innerHTML = `
<img src="${png}">
`

懒加载

用impor引入一个js 然后等于一个 promise 成功了就执行 js 错误了就报错

const button = document.createElement('button')
button.innerText = '懒加载'
button.onclick = () => {
    const promise = import('./lazy.js')
    promise.then((module) => {
        const fn = module.default
        fn()
    }, () => {
        console.log('失败了');
    })
}
div.appendChild(button)

前端学习笔记

23 Webpack配置

安装webpack

webpack的作用包括哪些？

loader 和 plugin的区别