手动配置webpack

最新推荐文章于 2024-06-04 23:25:11 发布

原创最新推荐文章于 2024-06-04 23:25:11 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

4 篇文章

订阅专栏

1.默认配置文件的名字是 webpack.config.js

webpack是node 写出来的，所以写node 语法

let path = require('path') //自带的
module.exports = {
    mode:'development', //模式 默认两种 production 生产模式 development 开发模式
    entry:'./src/index.js', //入口 从那个地方开始打包
    output : { //出口
        filename : 'bundle.js', //打包后的文件名
        path:path.resolve(__dirname,'dist'), //路径必须是一个绝对路径 加__dirname代表在当前目录下产生dist目录，不加也可以
    }
}

webpack.config.js是默认的配置名称（或者webpackfile.js）

如果要自己更改名字，可以在运行命令的时候后面指定，例如npx webpack --config webpack.config.js(名称)

如果觉得太长麻烦，可以在package.json文件中配置

{
  "name":"test-webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build":"webpack --config webpack.config.js"
  },
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  }
}

运行命令的时候，可以是

npm run build

前面打包后，只能在console中看到结果，下面配置在浏览器用localhost的地址访问

1.首先要启动服务安装服务

 yarn add webpack-dev-server -D

可以执行npx webpack-dev-server 或者在脚本中配置，它的好处是不会真实的打包文件，会在生成内存中的打包，会生成一个地址。

2.配置开发服务器

let path = require('path') //自带的

module.exports = {
    devServer :{//开发服务器的配置
        port:3000, //端口
        progress : true, //展示进度条
        contentBase:'./build', // 运行静态服务地址
        open:true, //启动浏览器
        compress:true , //gzip 压缩
    },
    mode:'development', //模式 默认两种 production 生产模式 development 开发模式
    entry:'./src/index.js', //入口 从那个地方开始打包
    output : { //出口
        filename : 'bundle.js', //打包后的文件名
        path:path.resolve(__dirname,'build'), //路径必须是一个绝对路径 加__dirname代表在当前目录下产生dist目录，不加也可以
    }
}

配置完成后，执行npm run dev，浏览器访问3000端口，会提示找不到页面

我们想要打包后，自动生成html文件并且将结果放入打包目录下，

3.首先在src目录下新建index.html做为模板，且需要安装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>Document</title>
</head>

<body>
   <!--模板-->

</body>

</html>

4.安装html插件

yarn add html-webpack-plugin

5.配置插件

let path = require('path') //自带的路径插件
let htmlWebpackPlugin = require("html-webpack-plugin") // html插件

module.exports = {
    devServer :{//开发服务器的配置
        port:3000, //端口
        progress : true, //展示进度条
        contentBase:'./build', // 运行静态服务地址
        open:true, //启动浏览器
        compress:true , //gzip 压缩
    },
    mode:'development', //模式 默认两种 production 生产模式 development 开发模式
    entry:'./src/index.js', //入口 从那个地方开始打包
    output : { //出口
        filename : 'bundle[hash:8].js', //打包后的文件名  加hash戳，避免缓存 8只显示8位
        path:path.resolve(__dirname,'build'), //路径必须是一个绝对路径 加__dirname代表在当前目录下产生dist目录，不加也可以
    },
    plugins:[//数组，放着所有webpack的插件
         new htmlWebpackPlugin({
            template:'./src/index.html', //模板
            filename: 'index.html', //打包后的文件名
            minify:{//打包压缩
                removeAttributeQuotes:true,//删除双引号
                collapseWhitespace:true,//打包成一行
            },
            hash:true,//hash戳
        })
    ]
}

加hash戳，为了防止覆盖以及缓存。

6.执行打包命令，在build下就有了文件，执行npm run dev也能看到console结果