webpack入门

最新推荐文章于 2024-09-20 15:37:07 发布

裂魂人1214

最新推荐文章于 2024-09-20 15:37:07 发布

阅读量343

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/b422761838/article/details/77341596

版权

使用前先安装nodejs

1.打包一个单独的js文件

新建一个hello.js文件

/**
 * Created by kongwc on 2017/8/17.
 */

function hello() {
    alert("hello,Mr.Kong");
}

打包使用命令 webpack hello.js hello.bundle.js

hello.bundle.js是打包后的文件名，可以随意取

执行命令后，会生成webpack hello.js hello.bundle.js

2.打包引用的文件

若引用css文件，需要安装install css-loader 和style-loader,由于国外的服务比较慢，所以建议使用国内阿里的npm服务器，命令为

npm install css-loader style-loader --registry=http://registry.npm.taobao.org

为避免每次输入，可以修改配置

npm configset registry http://registry.npm.taobao.org

hello.js改为

/**
 * Created by kongwc on 2017/8/17.
 */
require('./world');
require('style-loader!css-loader!./cssTest.css')
function hello() {
    alert("hello,Mr.Kong");
}

hello();

cssTest.css为

html,body{
    background-color: aquamarine;
}

为了查看效果，可以新建一个html文件,引入打包后的hello.bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./hello.bundle.js"></script>
</head>
<body>

</body>
</html>

为方便引入css文件，可以使用webpack参数

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!'

3，为防止每次修改文件都要输入打包命令，可以使用 --watch

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!' --watch

{
  "name": "vuejs",
  "version": "1.0.0",
  "description": "vue_webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "webpack" : "webpack --watch"
  },
  "author": "kongwc",
  "license": "ISC"
}

npm run webpack