webpack简单笔记

本文简单记录学习webpack3.0的笔记，已备日后查阅。节省查阅文档时间

安装

可以使用npm安装

//全局安装

npm install -g webpack

//安装到项目目录

npm install --save-dev webpack

npm init会创建package.json文件。配置该文件可以简化我们之后的一些操作，比如我们对其中的“script”添加start命令，可以用“npm start”替代webpack命令

{

    name: "webpack-example",

    ...

    "scripts": {

        "start": "webpack"

    },

    ...

}

几个概念

webpack是一个现代javascript应用程序的静态模块打包器。它构建一个依赖关系图，包含所有模块，打包成一个或多个bundle。

四个核心概念

entry ：指示webpack应该从哪个模块开始，构建依赖图。默认值./src
output：指示在哪里输出创建的bundles，默认值./dist
loader：让 webpack 能够去处理那些非 JavaScript 文件。loader 能够 import 导入任何类型的模块
plugin：插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量

entry 文件的指定

单一entry文件

mkdir entrydemo

cd entrydemo

npm init

npm init会让你输入一些信息配置package.json。如下

{

  "name": "entrydemo",

  "version": "1.0.0",

  "description": "",

  "main": "main.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "MIT"

}

接下来我们要创建index.html和main.js文件。main.js文件操作index.html的p标签内容

index.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

	</head>

	<body>

		<p id="title"></p>

		<script type="text/javascript" src="main.js"></script>

	</body>

</html>

main.js

document.getElementById("title").innerHTML="HELLO webpack";

下面我们要用webpack将main.js打包成bundle.js文件

如果你的webpack是全局安装，那么

webpack main.js bundle.js

如果是安装在项目根目录

node_modules/.bin/webpack main.js bundle.js

注意，在webpack3中，webpack-cli是集成的，到了4里面分开来了。第一次webpack时候可能会提示你安装webpack-cli，安装即可。上面的命令也有所改变，关于webpack4，本文不赘述

然后将index.html的javascript路径改为bundle.js

<script type="text/javascript" src="bundle.js"></script>

然后打开index.html，可以看到页面和上面是一样的

以上是用命令行指定entry file，下面我们写配置文件webpack.config.js去构建bundle.js

module.exports = {

	entry: './main.js',

	output: {

		filename: 'bundle.js'

	}

}

写好配置文件后，运行webpack命令就构建好bundle.js了。（非全局安装是node_modules/.bin/webpack）

多个entry file

假设我们的入口文件是main1.js和 main2.js，对应输出是bundle1.js和bundle2.js

webpack.config.js这么写

module.exports = {

	entry: {

		bundle1: 'main1.js',

		bundle2: 'main2.js'

	}

	output: {

		filename: '[name].js'

	}

}

loader

Babel-loader

Babel-loader用来将JSX/ES6文件转换成普通JS文件

module.exports = {

  entry: './main.jsx',

  output: {

    filename: 'bundle.js'

  },

  module: {

    rules: [

      {

        test: /\.jsx?$/,

        exclude: /node_modules/,

        use: {

          loader: 'babel-loader',

          options: {

            presets: ['es2015', 'react']

          }

        }

      }

    ]

  }

};

CSS-loader

webpack.config.js

module.exports = {

  entry: './main.js',

  output: {

    filename: 'bundle.js'

  },

  module: {

    rules:[

      {

        test: /\.css$/,

        use: [ 'style-loader', 'css-loader' ]

      },

    ]

  }

};