webpack初探索

开始之前安装好node、webpack。下面简单记录了手动配置webpack项目的过程。

一、开始

创建并初始化一个项目

新建一个项目文件夹webpack-basic并初始化package.json文件

mkdir webpack-basic
cd webpack-basic
npm init

生成的package.json详细内容如下:

{
  "name": "webpack-basic",
  "version": "1.0.0",
  "description": "A simple configuration of webpack",
  "main": "index.js",
  "dependencies": {
    "webpack": "^3.8.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

如果之前没有安装webpack，运行下面的命令：安装webpack并加入项目依赖：

$ npm install --save-dev webpack

webpack配置文件

新建webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

这是最简单的webpack配置。

entry配置入口文件，告诉webpack从哪儿开始，可以看做是根上下文或app的第一个启动文件。
output配置输出信息，包括输出目录、输出文件名等，上面只是简单配置了输出的文件为bundle.js。

启动webpack打包

编写好index.js。到这里就可以试试webpack是否好使，在终端运行命令：

$ webpack

指定入口文件后，webpack将自动识别项目所依赖的其它文件，构建一个依赖关系图。看到打包生成的bundle.js文件，好啦，webpack已经正常工作。

如果想将打包的文件输出到指定目录，可以配置output.path：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js'
}

在文件开头引入path:

const path = require('path');

重新打包会看到新生成了的bundle.js文件放置在dist文件夹下。

二、配置Loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件（如.css、.html、.jpg等），就需要使用 Loader进行转换。可以将Loader看成是模块和资源的转换器，在文件被添加到依赖图中时，将其转换为模块。

什么时候用Loader？

需要处理js文件以外的其它类型文件时，就需要使用loader 进行转换。它本身是一个函数，将源文件作为参数传入，返回转换后的结果。
以css文件为例，：
1. 安装Loader

npm install --save-dev css-loader

2. 配置module.rules

 module: {
        rules: [{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }]
    },

包含两个必要属性:

test: 识别出要转换的文件
use: 用什么转换

css-loader 解释)@import 和 url() ，会 import/require() 后再解析它们。更多

三、配置插件

插件（Plugins）用来拓展Webpack功能，它们会在整个构建过程中生效，执行相关的任务。

如何使用插件？

使用某个插件的步骤，以HtmlWebpackPugin插件为例：

1. 首先通过npm安装，并加入项目依赖

$ npm install --save-dev html-webpack-plugin

2. 然后在webpack.config.js中配置中的plugins，添加该插件的一个实例

plugins: [
  new HtmlWebpackPlugin()
]

plugins是一个数组，可以配置多个插件。
HtmlWebpackPlugin插件用于生成HTML文件。执行webpack命令，会在dist文件夹下生成一个index.html文件，内容如下：

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

可以看到，插件已经自动将webpack打包好的js文件引入body中。

如果有多个webpack入口点，所有的都会在生成的HTML文件中的script标签内。如果有任何CSS assets 在webpack的输出中（例如，利用ExtractTextPlugin提取CSS），那么这些将被包含在HTML head中的标签内。

这个插件非常有用！此外还有很多非常棒的插件，看具体的需求配置使用。更多

yiranyu / notes Goto Github PK

notes's People

Contributors

Watchers

notes's Issues

webpack初探索

一、开始

创建并初始化一个项目

webpack配置文件

启动webpack打包

二、配置Loader

什么时候用Loader？

三、配置插件

如何使用插件？

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs