webpack从零开始学习一

最新推荐文章于 2024-05-16 03:00:39 发布

唐小亭

最新推荐文章于 2024-05-16 03:00:39 发布

阅读量254

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/tt18473481961/article/details/115532274

版权

1.新建项目

npm init或者npm init -y

-y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json

2.安装webpack、webpack-cli

npm install webpack webpack-cli -D

3.新建webpack.config.js配置文件

备注：执行npm install webpack webpack-cli -D后生成node_modules->bin->webpack.cmd

a.mode(模式)

b).配置自定义脚本

"build":"webpack"

c).配置开发服务器

npm i webpack-dev-server -D

执行后会在bin目录下生成webpack-dev-server.cmd文件

自定义脚本："dev": "webpack-dev-server"

运行npm run dev,发现报错： Error: Cannot find module 'webpack-cli/bin/config-yargs’

后来查看一些资料，发现，webpack的版本与webpack-dev-server的版本不兼容。

经过不断的努力，最后重装了webpack、 webpack-cli、webpack-dev-server。

"devDependencies": {
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  }

卸载局部或者全局 webpack-dev-server

npm uninstall webpack-dev-server -g       卸载全局
npm uninstall webpack-dev-server -D      卸载局部(本地)

安装指定版本的 webpack-dev-server@2.9.7

npm i webpack-dev-server@2.9.7 -D    本地安装

再运行npm run dev终于不再报错了。

此时打开http://localhost:8080/，会发现页面如下：

接下来我们需要配置以下代码：

devServer: {
        contentBase: path.join(__dirname,'dist') // 产出文件的根目录
    }

再运行，页面就正常显示了

d).添加--open可以在运行命令时自动打开浏览器，默认端口是8080

e).安装loader引入css文件

备注：loader可以将非js文件转化成js文件

npm i css-loader style-loader -D

 module: {
        rules:[
            {
                test: /\.css$/, // 如果要require或import的文件是css的文件的话
                // 从右向左处理css文件，loader是一个函数
                use:['style-loader','css-loader'] // 顺序不能反
            }
        ]
    }

4.entry如果是一个文件的话那就是单入口

 //entry:'./src/index.js', //入口文件
    entry: {
        index:'./src/index.js',
        login:'./src/login.js'
    }

此时再次执行npm run build命令就会在dist下生成两个同名的js文件，如上图

如果要加上hash可以添加以下代码，hash可以防止缓存，每一次build会生成一个hash值

filename: '[name].[hash].js' // 文件名

如果entry是单入口，那么chunk的名字就叫main

5.我们希望dist文件夹自动生成index.html文件，那么我们需要安装一个插件：

npm install html-webpack-plugin -D

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 因为开发环境下和生产环境下的webpack配置有很多不一样的地方
    mode: 'development', // 模式
    entry:'./src/index.js', //入口文件
    // entry: {
    //     index:'./src/index.js',
    //     login:'./src/login.js'
    // },
    output: {
        path: path.join(__dirname,'dist'), // 输出的目录只能是绝对目录
        filename: '[name].[hash].js' // 文件名
    },
    devServer: {
        contentBase: path.join(__dirname,'dist') // 产出文件的根目录
    },
    module: {
        rules:[
            {
                test: /\.css$/, // 如果要require或import的文件是css的文件的话
                // 从右向左处理css文件，loader是一个函数
                use:['style-loader','css-loader'] // 顺序不能反
            }
        ]
    },
    plugins: [
        // 这个插件是产出html文件，在编译的时候会读取模板文件
        new HtmlWebpackPlugin({
            template: './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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
</head>
<body>
    
</body>
</html>

执行npm run build发现法报错：


> learn1@1.0.0 build E:\webpack learn\learn1
> webpack

E:\webpack learn\learn1\node_modules\webpack-cli\bin\cli.js:281
                                throw err;
                                ^

TypeError: Cannot read property 'tap' of undefined
    at HtmlWebpackPlugin.apply (E:\webpack learn\learn1\node_modules\html-webpack-plugin\index.js:40:31)
    at webpack (E:\webpack learn\learn1\node_modules\webpack\lib\webpack.js:51:13)
    at processOptions (E:\webpack learn\learn1\node_modules\webpack-cli\bin\cli.js:272:16)
    at yargs.parse (E:\webpack learn\learn1\node_modules\webpack-cli\bin\cli.js:363:3)
    at Object.parse (E:\webpack learn\learn1\node_modules\yargs\yargs.js:567:18)
    at E:\webpack learn\learn1\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (E:\webpack learn\learn1\node_modules\webpack-cli\bin\cli.js:365:3)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (E:\webpack learn\learn1\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! learn1@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the learn1@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Program Files (x86)\node_cache\_logs\2021-04-13T14_19_31_742Z-debug.log

此时我们的package.json文件的npm配置版本如下：

 "devDependencies": {
    "css-loader": "^5.2.0",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  }

咱们把html-webpack-plugin版本降到4.5.2再执行npm run build发现成功，"html-webpack-plugin": "^4.5.2"

https://github.com/jantimon/html-webpack-plugin/issues/1617

拓展：

6.咱们删掉dist文件夹执行npm run dev，查看源代码发现有引入main.js，但代码又没有生成这个文件，原因如下：

npm run dev是启动执行了webpack-dev-server，如果你使用了devServer，那么产出的文件都会被写到内存里，而不是写到硬盘。

7.引入图片

npm i file-loader url-loader -D

引入对应的lader,代码如下：

module: {
        rules:[
            {
                test: /\.css$/, // 如果要require或import的文件是css的文件的话
                // 从右向左处理css文件，loader是一个函数
                use:['style-loader','css-loader'] // 顺序不能反
            },
            {
                test: /\.(jpg|png|gif|jpeg|svg)$/, 
                use:'file-loader' // 顺序不能反
            }
        ]
    }

js中使用如下:

console.log('1111')
let logo = require('./images/1000.jpg')
console.log('logo地址：',logo)
let img = new Image()
img.src=logo
document.body.appendChild(img)

8.css中引入图片

在js中引入css

import('./index.css')

css中写以下代码：

#logo {
    width:200px;
    height: 200px;
    background-image: url('./images/1000.jpg');
}

9.url-loader

module: {
        rules:[
            {
                test: /\.css$/, // 如果要require或import的文件是css的文件的话
                // 从右向左处理css文件，loader是一个函数
                use:['style-loader','css-loader'] // 顺序不能反
            },
            {
                test: /\.(jpg|png|gif|jpeg|svg)$/, 
                use:'file-loader' // 顺序不能反
            },
            {
                test: /\.(jpg|png|gif|jpeg|svg)$/,
                use:{
                    // url内部内置了file-loader
                    loader: 'url-loader',
                    options: { // 如果要加载的图片大小小10k的话，就把这张图片转成base64编码内嵌到网页中去
                        limit: 10*1024
                    }
                }
            }
        ]
    }

10.clean-webpack-plugin插件可以在每次build时自动清除上一次的dist文件

11.分离css文件

npm install mini-css-extract-plugin -D

12.给打包后的css、images单独指定文件夹

13.html代码中引入图片html-withimg-loader

添加一个loader,代码如下：

14.怎么用less、sass

npm i less less-loader node-sass sass-loader -D

15.处理css3属性前缀

npm i postcss-loader autoprefixer -D

还需要建一个js文件，如下：

还可以建一个配置文件，控制兼容写法的版本

16.转义ES6/ES7/JSX

npm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D

npm i @babel/plugin-proposal-decorator @babel/pulgin-proposal-class-properties -D

如果需要给插件传承，那就要把它变成二维数组，如下：

唐小亭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack从零开始学习一

1.新建项目npm init或者npm init -y-y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json2.安装webpack、webpack-clinpm installwebpackwebpack-cli -D3.新建webpack.config.js配置文件备注：执行npm installwebpackwebpack-cli -D后生成node_modules->bin->webpack.cmda.m...
复制链接

扫一扫