webpack入门日志

2016-10-10 本文已影响0人卡西莫多cc

1.安装
webpack依赖nodeJS环境，所以安装webpack之前先确保本机已安装nodeJS，执行以下命令在全局下安装webpack：

sudo npm install -g webpack

2.在项目目录安装依赖

在项目目录执行以下命令生成package.json

npm init

npm install webpack --save-dev

执行以下命令在项目目录中安装webpack开发工具（如果不需要可以省略）

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

3.使用

新建一个index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

新建一个js的入口文件entry.js

document.write("it works");

使用webpack将entry.js编译至引用的bundle.js,编译完成之后在浏览器中打开index.html会显示 it works

webpack entry.js bundle.js

4.为项目添加模块

新建一个文件module.js

module.exports=document.write(" it works from module.js")

更改js入口文件entry.js

document.write("it works");
document.write(require("./module.js"))

重新编译entry.js至bundle.js
刷新index.html发现内容变成it works it works from module.js

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

5.loader载入任意模块资源（以加载css为例）

安装 style-loader css-loader

npm install css-loader style-loader

新建css文件styel.css

body{
    background:red;
}

在入口文件entry.js中引入文件

require("./style.css");
document.write("it works");
document.write(require("./module.js"));

重新编译entry.js至bundle.js

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

刷新页面，页面背景为红色

6.配置
配置文件中主要配置一些webpack执行命令的一些参数和插件，以下是配置5中css-loader的命令参数例子：

var webpack = require('webpack')

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

配置完以上参数后，5中在重新编译的时候只需执行以下命令即可

webpack

7.插件
在webpack中使用插件非常的简单，只需要在配置文件中配置插件即可

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: "./",
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  },
  plugins: [
    new webpack.BannerPlugin('This file is created by llz')
  ]
}

以上的plugins配置选项中配置的插件就是在bundle.js的文件头部插入注释

8.开发环境与调试

启用webpack服务器

webpack-dev-server

启用webpack文件修改实时监控

webpack --watch

webpack显示文件编译进度

webpack --progress

打印编译详细日志

webpack --display-error-details

webpack入门日志

猜你喜欢

热点阅读