神秘的webpack
2019-04-13 本文已影响19人
极课编程
1、安装
打开node，敲入命令行
①全局安装
$ npm install webpack -g
②安装在项目中，将依赖写入package.json
$ npm init
$ npm install webpack --save-dev
2、编译
在项目文件下
①新建一个文件entry.js并输入内容：
document.write("hello world!");
②新建一个index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
<!--这里src引用的bundle.js是webpack打包entry.js后生成的-->
</body>
</html>
③node里敲命令，编译文件
$ webpack ./entry.js bundel.js
3、组件
entry.js是入口文件，一般还有各个组件模块，从而引用实现复用。
①新建一个component.js文件，输入
module.exports = "It works from component.js";
②修改入口文件entry.js
//document.write("hello world!");
document.write(require("./component.js"));
③node敲命令重新编译，然后去浏览器里刷新查看
$ webpack ./entry.js bundel.js
4、css-loader和style-loader以及wepack.config.js
css-loader用来处理CSS文件；style-loader将样式应用在CSS文件上
①node里敲命令安装这两个模板
$ npm install css-loader style-loader --save-dev
②新建一个style.css文件
body{
background:red;
}
③更新修改entry.js
require("./style.css");
document.write(require("./content.js"));
④在项目文件下新建一个webpack.config.js文件并输入
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
//注意：这里的style和css后面都要加"-loader"后缀，官网上教程没有更新，详情：https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
]
}
};
⑤node里敲命令编译
这个时候只需要敲webpack就可以了，因为Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的webpack.config.js
$ webpack
