webpack傻瓜入门教程

最新推荐文章于 2024-07-28 00:56:04 发布

wx_lidysun

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量3.8k

点赞数 3

分类专栏： Javascript 框架插件文章标签： webpack

本文链接：https://blog.csdn.net/lidysun/article/details/55049386

版权

Javascript 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

框架插件

14 篇文章 0 订阅

订阅专栏

webpack安装

新建立项目文件夹，如app(文件夹名称不要大写)
前往https://nodejs.org/en/ 下载nodejs并安装
进入app文件夹，shif+鼠标右键，在此处打开命令窗口，npm init 并enter初始化生成config.json

生成的package.json如下：
安装webpack

npm install webpack -g //全局安装
npm install webpack --save-dev //本地安装，并写入到config.json

本地安装并写入后，package.json新增了devDependencies配置；打开package.json，将main的值改为“result.js”
这里写图片描述

webpack打包

新建index.html，并在其中引入主result.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>lidysun webpack入门教程</title>
</head>
<body>
  <script src="result.js"></script>
</body>
</html>

新建entry.js入口文件

document.write('我来自entry.js文件!');

命令窗口webpack编译：

webpack entry.js result.js

浏览器打开index.html，刷新可看到结果。
这里写图片描述

webpack加载其它js模块

新建other.js

module.exports = '<br>我来自other.js'

修改entry.js

document.write('我来自entry.js文件!');
document.write(require('./other.js'));

重新编译webpack entry.js result.js 并刷新浏览器，可以看到other.js的内容也输出了：

webpack加载css模块

新建style.css

body{color:#ff6600;}

本地安装css-loader style-loader

npm install css-loader style-loader --save-dev

安装完成后，重新打开package.json，检查依赖是否自动添加
这里写图片描述

修改entry.js
注意：style-loader和css-loader的顺序不能变，且后面的 ; 分号不能遗漏。

require("!style-loader!css-loader!./style.css");
document.write('我来自entry.js文件!');
document.write(require('./other.js'));

编译 webpack entry.js result.js 并刷新index.html可以看到样式变化

webpack配置

新建webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry:'./entry.js',
  output:{
    path:__dirname,
    filename:'result.js',
  },
  module:{
    loaders:[
      {test:/\.css$/,loader:'style-loader!css-loader'}
    ]
  }
}

entry 输入文件，相当于设置webpack entry.js result.js 中的entry.js
output 输出文件，相当于设置webpack entry.js result.js 中的result.js
path 输出文件的位置，__dirname 表示当前目录，可根据实际项目更改，如 ./js
loader 设置不同模块的编译方式。
当webpack.config.js中没有设置loaders {test:/\.css$/,loader:'style-loader!css-loader'} 时，并且entry.js引入css的格式为简单的 require('./style.css'); 时，我们编译命令必须加上参数webpack entry.js result.js --module-bind "css=style-loader!css-loader"，但当我们设置了loaders后，引入css文件也可以像js一样简单，编译时就可以不用传参，简直爽爆了。