webpack15分钟搞定

最新推荐文章于 2024-05-29 21:08:09 发布

ttt54355

最新推荐文章于 2024-05-29 21:08:09 发布

阅读量581

点赞数

分类专栏：工具

本文链接：https://blog.csdn.net/Tsite/article/details/62417844

版权

工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Webpack的作用请自行百度，本文主要讲解Webpack的基础使用方法。

一、安装

安装Node.js（自行百度）。然后执行以下命令，将Webpack安装到全局环境，如果已经安装过的会重新覆盖不会有影响。

$ npm install webpack -g

一般情况下我们都会把它安装到依赖中，以便使用本地的Webpack。

进入项目文件夹中，创建package.json

$ npm init

安装 webpack 依赖

$ npm install webpack --save-dev

也可以安装指定版本

# 查看 webpack 版本信息
$ npm info webpack

# 安装指定版本的 webpack(--save是生产环境需要用到，--save-dev是开发环境需要用到)
$ npm install webpack@1.12.x --save-dev

如果需要使用 Webpack 开发工具，要单独安装：

$ npm install webpack-dev-server --save-dev

二、使用

创建index.html和一个入口文件index.js

<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

// index.js
document.write('index输出');

执行编译index.js 打包到bundle.js

$ webpack index.js bundle.js

打包成功会显示日志：

$ webpack index.js bundle.js
Hash: bfb389bb48705634d3e0
Version: webpack 2.2.1
Time: 74ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.67 kB       0  [emitted]  main
   [0] ./index.js 39 bytes {0} [built]

打开浏览器即可看到输出。

接下来添加一个模块 module.js 并修改入口 index.js：

// module.js
module.exports = 'It works from module.js.'

// index.js
document.write('index输出.')
document.write(require('./module.js')) // 添加模块

重新打包并查看页面

三、Loader

Webpack只能处理js模块，Loader可以理解为资源转换器

安装loader：

npm install css-loader style-loader

在页面引入一个CSS文件index.html

/* index.css */
body { background: #f66; }

重新编译打包刷新页面就可以看到页面的变化了。
Tips：
如果每次require CSS文件的时候都需要写前缀，很麻烦。我们根据模块类型（扩展名）来自动绑定需要的loader。
require(“!style!css!./style.css”) 修改为 require(“./style.css”) ，然后执行：

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

# 有些环境下可能需要使用双引号
$ webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

可以查看这两种方式效果是一样的。

四、配置文件

webpack在编译打包的时候，不仅能在命令行内传入各种参数，也能在指定的配置文件内提前进行配置。默认情况下，会搜索当前目录的webpack.config.js文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 –config 选项来指定配置文件。

我们继续我们demo，创建一个webpack.config.js:

var webpack = require('webpack')

module.exports = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

现在我们可以简化index.js中的css的加载方式。

require（'./style.js's）

最后运行

webpack

可以看到和运行

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

是一样一样的。

ttt54355

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack15分钟搞定

Webpack的作用请自行百度，本文主要讲解Webpack的基础使用方法。一、安装安装Node.js（自行百度）。然后执行以下命令，将Webpack安装到全局环境，如果已经安装过的会重新覆盖不会有影响。$ npm install webpack -g 一般情况下我们都会把它安装到依赖中，以便使用本地的Webpack。进入项目文件夹中，创建package.json$ npm init安装 webpa
复制链接

扫一扫