Webpack安装及简易webpack项目配置（4.0以上版本）

最新推荐文章于 2023-06-02 12:40:50 发布

头发茂盛的程序员

最新推荐文章于 2023-06-02 12:40:50 发布

阅读量1.1k

点赞数 1

文章标签：前端 Webpack vue

本文链接：https://blog.csdn.net/qq_35776434/article/details/103419024

版权

一开始照着书上的敲，怎么也run不起来，说缺少webpack-cli。就从网上找“补救方法”，然，在我这里都不管用，索性还是看中文官方文档，瞬间run起来了，舒服。毕竟第一次跑通，记录一下过程。

1.安装最新版node.js和NPM

node.js：https://nodejs.org/en/

npm：https://www.runoob.com/nodejs/nodejs-npm.html

之后可以通过在终端输入npm -v 和 node -v查看，如果有版本号，则安装成功。

node -v
npm -v

2.创建项目根目录demo，用NPM命令初始化

npm init

name和version是必填的，不过一般一直按回车默认即可，最后会在demo目录生成一个package.json的文件

3.安装webpack

最新版

npm install --save-dev webpack

或者也可以安装指定版本，例如webpackv4.41.2

npm install --save-dev webpack@v4.41.2

如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install --save-dev webpack-cli

（可参考官方文档：https://www.webpackjs.com/guides/installation/#%E6%9C%AC%E5%9C%B0%E5%AE%89%E8%A3%85）

完成后输入webpack -v，若有版本号则安装成功。

这时package.json文件里会出现这样的字段：（版本号可变）

"devDependencies": {

    "webpack": "^4.41.2",

    "webpack-cli": "^3.3.10"

},

4.安装webpack-dev-server

npm install webpack-dev-server --save-dev

出现下面字段就可以了

"devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }

到这步，安装方面工作全部完成。

——————————————————————————————————————————————————————————

下面为一些配置。

1.在demo目录下创建webpack.config.js,并初始化

var config = {
    
};

module.exports = config;

2.在package.json里的scripts里增加启动webpack-dev-server服务的代码如下：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config webpack.config.js"
  },

3.在demo目录下创建空的入口文件main.js

4.继续配置完webpack.config.js

var path = require('path');

var config = {
    entry: {
        main: './main.js'
    },
    output: {
        path: path.join(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'main.js'
    }
};

module.exports = config;

5.创建html文件作为入口（多余代码已省略），打包后的文件存储为demo/dist/main.js，引入即可

<body>
    <div id="app">
        Hello World.
    </div>
    <script type="text/javascript" src="/dist/main.js"></script>
</body>

6.最后，在终端执行npm run dev，会自动在浏览器打开页面，并显示内容Hello World.就大功告成。

头发茂盛的程序员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Webpack安装及简易webpack项目配置（4.0以上版本）

一开始照着书上的敲，怎么也run不起来，说缺少webpack-cli。就从网上找“补救方法”，然，在我这里都不管用，索性还是看中文官方文档，瞬间run起来了，舒服。毕竟第一次跑通，记录一下过程。1.安装最新版node.js和NPMnode.js：https://nodejs.org/en/npm：https://www.runoob.com/nodejs/nodejs-install-...
复制链接

扫一扫