Webpack4基本使用（一）

要实现wepack打包，首先安装一以下内容

npm install webpack -g

指定版本npm install [email protected] -g

npm install webpack-cli -g

npm install webpack-dev-server -g

打包步骤

1.首先创建3个文件夹 mkdir dist src config

2.git初始化文件夹，便于后期上传到github，git init

3.然后初始化生成package.json,使用cnpm init -y

在webpack4中可以实现简易打包

例子：

在src文件夹中创建index.js，dist文件夹中创建index.html，切入文件夹，可以使用cd .>index.js创建文件，在mac.linux使用touch index.js

使用code .使用vscode打开文件夹

webpack --mode=develpoment

webpack --mode=prodution

lkai

这就是webpack的简易打包方式，但是加载css需要webpack.dev.js这个文件，所以所还是得使用之前的打包方式config.dev.js配置文件控制

先看打包文件目录，将main.js打包，然后index.html引用这个打包文件

配置config.dev.js:

const path = require("path");
module.exports = {
    //入口文件
    entry: {
        main: "./src/main.js"//路径是以webpack根目录
    },
    mode: "production",//配置生产环境或者开发环境
    output: {
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname, "../dist"),//使用绝对路径作为相对路径配置路径
        // publicPath: "/"
    },
    devServer: {
        contentBase: "dist"//用于配置刚进入服务器，就显示的页面
    }
}

配置好后，开始打包

webpack --config=config/webpack.dev.js

webpack-dev-server --config=config/webpack.dev.js

这就将src/main.js打包成main-buddle.js，并且被index.html引用了，下面打包css，html请看博客主目录

Webpack4基本使用（一）

猜你喜欢