webpack4系列教材-入门版

webpack4系列教材-入门

起步

使用yarn init 初始化一个基本项目

安装依赖

进入终端输入
yarn add webpack
yarn add webpack-cli
由于webpack4官网要求需要多一个webpack-cli依赖

开始

在根目录新建一个index.html，main.js

如图所示

-w189

index.html内容如下，假定打包文件叫bundle.js

main.js内容如下

document.write('hello webpack')

webpack开始

在项目根目录创建一个webpage.config.js
内容

module.exports = {
    mode:'production', //当前模式为生产模式
    entry: "./main.js", //入口文件
    output: {
      filename:'bundle.js', //输出文件名
      path:__dirname  //node.js中全局变量,为当前根目录
    }
}

启动

方法一：在package.json加入以下内容

"scripts": {
    "start": "webpack --config webpack.config.js"
}

然后在终端执行 yarn run start 即可

方法二：直接在终端执行

npx webpack --config webpack.config.js

看到下列输出，就大功告成了！！

-w435

打包完成！！，webpage帮我们生成了一个bundle.js

-w195

来我们看成果

直接到浏览器打开根目录index.html，看到输出hello webpack!! 非常完美！

-w615