webpack实战（一）

最新推荐文章于 2024-04-11 04:37:51 发布

天下1281

最新推荐文章于 2024-04-11 04:37:51 发布

阅读量371

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/boysky0015/article/details/73882301

版权

webpack 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

首先，新建一个空的文件，比如item
进入cmd命令行，安装webpack

npm install webpack --save-dev

然后初始化

npm init

初始化的过程中需要填写一些信息，如果你不想填写的话，那么一直enter，直到结束。
初始化完之后，我们发现item文件中多了一个文件package.json

{
  "name": "webpack_demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.0.0"
  }
}

我们会看到package.json中有这么一行代码

"devDependencies": {
    "webpack": "^3.0.0"
  }

说明我们安装webpack已经成功。webpack是3.0.0版本的。
然后我们需要新建一个配置文件：
webpack.config.js

module.export = {
    //入口文件
    entry: 'src/js/index.js',
    //出口文件
    output: {
        // __dirname 在任何模块文件内部，可以通过__dirname变量名，获取当前模块文件所在目录的完整绝对路径。
        path: __dirname + '/dist',
        filename: 'bundle.js',
    }
}

index.js

document.write("11"); //测试代码

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页</title>
</head>
<body>
    <script type="text/javascript" src="dist/js/bundle.js"></script>
</body>
</html>

然后在命令行中运行

webpack

当然也可以这样
在package.json文件中的scripts中加入下面代码

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack watch"
},

watch 起到监听的作用，意思就是当你在index.js文件改变内容时，不需要重新运行。只需要刷新即可。
然后在命令行中

npm start 即可运行代码

天下1281

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack实战（一）

首先，新建一个空的文件，比如item 进入cmd命令行，安装webpacknpm install webpack --save-dev然后初始化npm init初始化的过程中需要填写一些信息，如果你不想填写的话，那么一直enter，直到结束。初始化完之后，我们发现item文件中多了一个文件package.json{ "name": "webpack_demo1", "version":
复制链接

扫一扫

专栏目录