webpack实战（一）

来源：互联网发布：帝国cms网站源码编辑：程序博客网时间：2024/06/07 02:58

首先，新建一个空的文件，比如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 即可运行代码

阅读全文

0 0