webpack打包方法（适用webpack4）

版本问题是真的烦呀，刚开始看的入门文章是webpack3，但是我安装的是webpack4，所以一路下来到处飘红，记录一下

新建文件夹 webpack-test，进入该文件夹在目录处输入cmd，打开命令行

初始化文件夹，输入

npm init 

生成package.json文件(包含的项目名称、版本、时间、负责人等)，如果想快点，默认输入，就直接运行

npm init -y

 

如果没有安装过全局的webpack就需要先安装一次

npm install -g webpack

安装本地的webpack 及webpack-cli(每个项目都需要安装)

npm install --save-dev webpack  //--save-dev是开发依赖  --save是发布依赖

npm install --save-dev webpack-cli

安装好以后可以在package.json里看到webpack和webpack-cli的版本

新建一个src文件夹，下面新建a.js、index.js和index.html

//index.js

console.log("Hello webpack")
let str = require("./a.js")
console.log(str)

//a.js
module.exports = "webpack yeah!"

//index.html

//新建一个模板文件，添加下列代码
<script src="index.js"></script>

目录结构如下

此时再浏览器中运行index.html，控制台报错，打印如下

现在使用webpack进行打包

方法一、

//webpack4以前的打包命令：
//webpack  打包的文件  生成的文件
webpack .\src\index.js .\dist\bundle.js
//但是webpack4以后的打包命令是
//webpack 打包的文件 -o 生成的文件
webpack .\src\index.js -o .\dist\bundle.js

再将index.html文件中引入的js文件改为打包后的bundle.js

<script src="../dist/bundle.js"></script>

再次运行index.html可以看到控制台中打印出的内容

方法二、

删除刚刚的dist目录，直接使用webpack命令

此时默认生成dist目录和该目录下的main.js文件

我们新建一个webpack的配置文件webpack.config.js

//webpack.config.js

const path = require("path")
module.exports = {
        mode:"development",  //webpack模式 是production还是development，解决上一图片打包中的黄色警告
    entry:"./src/index.js",   //webpack要进行打包的文件
    output:{
        filename:"bundle.js",  //webpack打包后的文件名
        path:path.resolve(__dirname,"dist")  //webpack打包后的目录
    }
}

再次运行webpack命令

打包成功，运行index.html可以在控制台看到效果

 

ps：如果打包的配置文件名不是webpack.config.js需要修改命令  

如 webpack.config.dev.js

//运行的命令为
webpack --config webpack.config.dev.js

效果是一样的，如果是实际应用中不想运行这么长的命令，可以在package.json中配置命令

在script中添加

 "build":"webpack --config webpack.config.dev.js"

现在我们就可以用命令来执行打包

npm run build

效果和方法一、二是相同的。

 

初学者，请多指教！