webpack入门看他就够了！！
写在前面的话
前几年入门webpack是在segmentFault上看到的一篇很好的文章，连接在这里，有兴趣的同窗能够去看看，不过如今到4.x的版本了，好多东西不适用，就想本身再总结一下，一样，若是你对webpack不少基础的东西都很明白的话，这篇文章可能对你没有什么价值，若是你对webpack的一些概念仍是很模糊，相信跟着这篇文章敲下来应该会有更清晰的认识。css
什么是webpack
官网的定义是：html
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle前端
通俗的点来讲，webpack就是一个打包器，将你的项目视为一个总体，经过给定的一个或多个入口，找到项目中全部的依赖文件，使用loaders来处理他们，把你项目里的代码（.ts, .scss .less .jsx等文件）打包翻译成浏览器能够识别的代码，这样咱们只须要专一于开发就能够了。node
webpack的使用
初步了解webpack后，咱们下面开始使用webpackreact
安装webpack
webpack的安装有两种方式：1. 全局安装 2. 非全局安装webpack
新建一个空的文件夹：webpack_project， 进入到该目录下后git
npm init -y // 生成package.json文件
npm install -g webpack // 全局安装webpack
npm install -D webpack // 安装在项目目录webpack
npm install -g webpack-cli // 全局安装webpack命令行
复制代码
我在这里选择的是安装在项目目录中 而后在webpack_project下新建一个src和public的文件夹，src文件夹用来存放咱们要写的代码模块，public文件夹用来存放webpack打包以后供浏览器读取的文件，分别在建立三个文件es6
- index.html // 放在public下
- Greeter.js // 放在src下
- main.js // 放在src下
目录结构以下github
咱们在index.html文件中写入最基础的html代码：web
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack_project</title>
</head>
<body>
<div id='root'></div>
<script src="bundle.js"></script>
</body>
</html>
复制代码
在Greeter中暴露出一个返回div的dom元素的函数
// Greeter.js
module.exports = function() {
const greet = document.createElement('div');
greet.textContent = "Hello webpack!";
return greet;
};
复制代码
main.js文件中咱们将Greeter模块返回的节点插入页面
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
复制代码
正式使用webpack
调出终端在当前项目目录下：
webpack {enterFile} -o {outputFile} // enterFile 要打包的文件 outputFile打包后的文件
复制代码
对于本例来讲就是：
webpack src/main.js -o public/bundle.js
复制代码
会看到以下结果：
经过配置使用webpack
webpack还有不少其余的功能，可是这些功能若是都经过命令行来实现很不方便，也极容易出错，一个好的解决办法就是使用配置文件，乍一听配置文件你们可能比较方，其实就是一个Js的模块，把打包信息放在模块里而已
继续上一个例子来讲明如何书写这个配置文件，在根目录下新建一个名为webpack.config.js的文件，放一些很简单的配置信息，包括入口文件路径和打包后文件的存放路径
module.exports = {
entry: __dirname + "/src/main.js", //入口文件
output: {
path: __dirname + "/public", //存放打包后的文件路径
filename: "bundle.js" //打包后的文件名
}
}
复制代码
有了这个文件，下次在打包的时候只须要在终端中输入webpack便可完成打包了，也许你会以为在终端中输入webpack会很奇怪也不直观，能够在package.json的script中像我这样添加一个命令行
npm run start
复制代码
构建本地服务器
webpack提供了一个可选的本地开发服务器，能够监听你的本地代码修改，并自动刷新修改后的结果，这个本地服务器基于node.js构建，不过它是一个单独的组件，在webpack中进行配置以前须要单独安装它做为项目依赖
npm install --save-dev webpack-dev-server
复制代码
devserver做为webpack配置选项中的一项，如下是它的一些配置选项，更多配置可参考这里
| devserver的配置选项 | 功能描述 |
|---|---|
| contentBase | 默认webpack-dev-server会为根文件夹提供本地服务器，若是想为另一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录） |
| port | 设置默认监听端口，若是省略，默认为”8080“ |
| inline | 设置为 true，当源文件改变时会自动刷新页面 |
| historyApiFallback | 在开发单页应用时很是有用，它依赖于HTML5 history API，若是设置为true，全部的跳转将指向index.html |
把这些配置项添加到webpack配置文件中去，如今的配置文件webpack.config.js
module.exports = {
entry: __dirname + "/src/main.js", //入口文件
output: {
path: __dirname + "/public", //存放打包后的文件路径
filename: "bundle.js" //打包后的文件名
},
devServer: {
contentBase: "./public", // 本地服务器所加载的页面所在的目录
historyApiFallback: true, // 不跳转
inline: true // 开启实时刷新
}
}
复制代码
在package.json中的scripts对象中添加以下命令，用以开启本地服务器：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
复制代码
在终端中输入：
npm run server
复制代码
便可在本地的8080端口查看结果
Loaders
Loaders能够说是webpack强大的核心功能之一了，它提供了调用外部脚本的能力，实现对不一样格式的代码进行编译处理，处理成浏览器能够识别的JS，CSS等。好比ts-loader能够将咱们编写的.ts文件编译打包成.js文件，less-loader能够将.less文件预编译成.css文件,"react-loader"能够将.jsx编译成.js文件等等，下面介绍一些经常使用的loader。
Loaders须要单独安装而且须要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括如下几方面：
- test 用来匹配loaders所处理文件的拓展名的正则表达式（必须），告诉某个loader处理匹配上的哪些文件
- loader 指定匹配上的文件用什么loader来处理他们（必须）
- include/exclude 手动添加必须处理的文件（文件夹）或屏蔽不须要处理的文件（文件夹）（可选）；
- query：为loaders提供额外的设置选项（可选）
不过在配置loader以前，咱们把Greeter.js里的问候消息放在一个单独的JSON文件里,并经过合适的配置使Greeter.js能够读取该JSON文件的值，各文件修改后的代码以下：
在src文件夹中建立带有问候信息的JSON文件(命名为config.json)
{
"greetText": "Hi there and greetings from JSON!"
}
复制代码
更新后的Greeter.js
const config = require('./config.json');
module.exports = function() {
const greet = document.createElement('div');
greet.textContent = config.greetText;
return greet;
};
复制代码
babel
Babel实际上是一个编译JavaScript的平台，它能够编译代码帮你达到如下目的：
- 让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器彻底支持；
- 让你能使用基于JavaScript进行了拓展的语言，好比React的JSX；
Babel的安装与配置
Babel实际上是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack能够把其不一样的包整合在一块儿使用，对于每个你须要的功能或拓展，你都须要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。
咱们先来一次性安装这些依赖包
// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
复制代码
在webpack的配置文件中配置babel:
module.exports = {
entry: __dirname + "/src/main.js", //入口文件
output: {
path: __dirname + "/public", //存放打包后的文件路径
filename: "bundle.js" //打包后的文件名
},
devServer: {
contentBase: "./public", // 本地服务器所加载的页面所在的目录
historyApiFallback: true, // 不跳转
inline: true // 开启实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js为结尾的文件
use: {
loader: "babel-loader", // 用babel-loader处理以上被匹配上的文件
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/ // 不包括node_modules里的文件
}
]
}
}
复制代码
如今你的webpack的配置已经容许你使用ES6以及JSX的语法了。继续用上面的例子进行测试，不过此次咱们会使用React，记得先安装 React 和 React-DOM
npm install --save react react-dom
复制代码
接下来咱们使用ES6的语法，更新Greeter.js并返回一个React组件
报错：Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'
由于babel-loader的版本问题 先卸载 npm uninstall babel-loader 重装一个@7的版本 npm i babel-loader@7 -D
从新使用npm start打包，若是以前打开的本地服务器没有关闭，你应该能够在localhost:8080下看到与以前同样的内容，这说明react和es6被正常打包了。
babel的配置
Babel其实能够彻底在 webpack.config.js 中进行配置，可是考虑到babel具备很是多的配置选项，在单一的webpack.config.js文件中进行配置每每使得这个文件显得太复杂，所以一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。咱们如今的babel的配置并不算复杂，不过以后咱们会再加一些东西，所以如今咱们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），以下：
// webpack.config.js
module.exports = {
entry: __dirname + "/src/main.jsx", //入口文件
output: {
path: __dirname + "/public", //存放打包后的文件路径
filename: "bundle.js" //打包后的文件名
},
devServer: {
contentBase: "./public", // 本地服务器所加载的页面所在的目录
historyApiFallback: true, // 不跳转
inline: true // 开启实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js为结尾的文件
use: {
loader: "babel-loader", // 用babel-loader处理以上被匹配上的文件
// babel配置迁移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules里的文件
}
]
}
}
复制代码
// .babelrc
{
"presets": ["react", "env"]
}
复制代码
到目前为止，咱们已经知道了，对于模块，Webpack能提供很是强大的处理功能，那那些是模块呢。
一切皆模块
Webpack有一个不可不说的优势，它把全部的文件都都当作模块处理，JavaScript代码，CSS和fonts以及图片等等经过合适的loader均可以被处理。
CSS
webpack提供两个工具处理样式表，css-loader 和 style-loader，两者处理的任务不一样，css-loader使你可以使用相似@import 和 url(...)的方法实现 require()的功能,style-loader将全部的计算后的样式加入页面中，两者组合在一块儿使你可以把样式表嵌入webpack打包后的JS文件中。
继续上面的例子
// 安装
npm install --save-dev style-loader css-loader
复制代码
配置更新以下，添加css-loader,style-loader：
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js为结尾的文件
use: {
loader: "babel-loader", // 用babel-loader处理以上被匹配上的文件
// babel配置迁移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules里的文件
},
{
test: /\.css$/,
// 同一个文件类型使用多个loader用一个数组包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
}
]
}
};
复制代码
接下来，在src文件夹里建立一个名字为"main.css"的文件，对一些元素设置样式
/* main.css */
html {
box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}
复制代码
咱们这里例子中用到的webpack只有单一的入口，其它的模块须要经过 import, require, url等与入口文件创建其关联，为了让webpack能找到”main.css“文件，咱们把它导入”main.js “中，这样webpack就能找到main.css了，以下
//main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
import './main.css';//使用require导入css文件
render(<Greeter />, document.getElementById('root'));
复制代码
上面的代码说明webpack是怎么把css当作模块看待的，我们继续看一个更加真实的css模块实践
css Module
JavaScript经过一些新的语言特性，更好的工具以及更好的实践方法（好比说模块化）发展得很是迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，配合优化工具，依赖管理和加载管理能够自动完成。
不过前端的另一部分，CSS发展就相对慢一些，大多的样式表却依旧巨大且充满了全局类名，维护和修改都很是困难。
被称为CSS modules的技术意在把JS的模块化思想带入CSS中来，经过CSS模块，全部的类名，动画名默认都只做用于当前模块。Webpack对CSS模块化提供了很是好的支持，只须要在CSS loader中进行简单配置便可，而后就能够直接把CSS的类名传递到组件的代码中，这样作有效避免了全局污染。具体的代码以下
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js为结尾的文件
use: {
loader: "babel-loader", // 用babel-loader处理以上被匹配上的文件
// babel配置迁移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules里的文件
},
{
test: /\.css$/,
// 同一个文件类型使用多个loader用一个数组包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
},
}
}
]
}
]
}
};
复制代码
咱们在app文件夹下建立一个Greeter.css文件来进行一下测试
/* Greeter.css */
.root {
background-color: #eee;
padding: 10px;
border: 3px solid #ccc;
}
复制代码
导入.root到Greeter.js中
import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//导入
class Greeter extends Component{
render() {
return (
<div className={styles.root}> //使用cssModule添加类名的方法
{config.greetText}
</div>
);
}
}
export default Greeter
复制代码
结果相同的类名也不会形成不一样组件之间的污染。
CSS预处理器
Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们容许你使用相似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器能够这些特殊类型的语句转化为浏览器可识别的CSS语句，
你如今可能都已经熟悉了，在webpack里使用相关loaders进行配置就可使用了，如下是经常使用的CSS 处理loaders:
- Less Loader
- Sass Loader
- Stylus Loader
不过其实也存在一个CSS的处理平台-PostCSS，它能够帮助你的CSS实现更多的功能，查看这里能够了解更多 举例来讲如何使用PostCSS，咱们使用PostCSS来为CSS代码自动添加适应不一样浏览器的CSS前缀。
首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-loader autoprefixer
复制代码
接下来，在webpack配置文件中添加postcss-loader，在根目录新建postcss.config.js,并添加以下代码以后，从新使用npm start打包时，你写的css会自动根据Can i use里的数据添加不一样前缀了。
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js为结尾的文件
use: {
loader: "babel-loader", // 用babel-loader处理以上被匹配上的文件
// babel配置迁移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules里的文件
},
{
test: /\.css$/,
// 同一个文件类型使用多个loader用一个数组包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
},
}
},
{
loader: "postcss-loader"
}
]
}
]
}
};
复制代码
至此，本文已经谈论了处理JS的Babel和处理CSS的PostCSS的基本用法，它们其实也是两个单独的平台，配合webpack能够很好的发挥它们的做用。接下来介绍Webpack中另外一个很是重要的功能-Plugins
插件
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程当中生效，执行相关的任务。 Loaders和Plugins经常被弄混，可是他们实际上是彻底不一样的东西，能够这么来讲，loaders是在打包构建过程当中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操做单个文件，它直接对整个构建过程其做用。
Webpack有不少内置插件，同时也有不少第三方插件，可让咱们完成更加丰富的功能。
使用插件的方法
要使用某个插件，咱们须要经过npm安装它，而后要作的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）继续上面的例子，咱们添加了一个给打包后代码添加版权声明的插件。
const webpack = require('webpack');
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js为结尾的文件
use: {
loader: "babel-loader", // 用babel-loader处理以上被匹配上的文件
// babel配置迁移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules里的文件
},
{
test: /\.css$/,
// 同一个文件类型使用多个loader用一个数组包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
},
}
},
{
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版权全部，翻版必究')
],
};
复制代码
经过这个插件，打包后的JS文件头就会有以下效果:
HtmlWebpackPlugin
这个插件的做用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不一样时很是有用（好比添加了hash值）。 安装：
npm install --save-dev html-webpack-plugin
复制代码
这个插件自动完成了咱们以前手动作的一些事情，在正式使用以前须要对一直以来的项目结构作一些更改：
- 移除public文件夹，利用此插件，index.html文件会自动生成，此外CSS已经经过前面的操做打包到JS中了。
- 在src目录下，建立一个index.tmpl.html文件模板，这个模板包含title等必须元素，在编译过程当中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件，index.tmpl.html中的模板源代码以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
复制代码
更新webpack的配置文件，方法同上,新建一个build文件夹用来存放最终的输出文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname + "/src/main.jsx", //入口文件
output: {
path: __dirname + "/build", //存放打包后的文件路径
filename: "bundle.js" //打包后的文件名
},
devServer: {
contentBase: "./public", // 本地服务器所加载的页面所在的目录
historyApiFallback: true, // 不跳转
inline: true // 开启实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js为结尾的文件
use: {
loader: "babel-loader", // 用babel-loader处理以上被匹配上的文件
// babel配置迁移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules里的文件
},
{
test: /\.css$/,
// 同一个文件类型使用多个loader用一个数组包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
},
}
},
{
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版权全部，翻版必究'),
new HtmlWebpackPlugin(({
template: __dirname + "/src/index.tmpl.html" // new 一个这个插件的实例，并传入相关的参数
}))
],
};
复制代码
再次执行npm start你会发现，build文件夹下面生成了bundle.js和index.html。
Hot Module Replacement
Hot Module Replacement（HMR）也是webpack里颇有用的一个插件，它容许你在修改组件代码后，自动刷新实时预览修改后的效果。
在webpack中实现HMR也很简单，只须要作两项配置:
- 在webpack配置文件中添加HMR插件；
- 在Webpack Dev Server中添加“hot”参数；
不过配置完这些后，JS模块其实仍是不能自动热加载的，还须要在你的JS模块中执行一个Webpack提供的API才能实现热加载，虽然这个API不难使用，可是若是是React模块，使用咱们已经熟悉的Babel能够更方便的实现功能热加载。
整理下咱们的思路，具体实现方法以下:
- Babel和webpack是独立的工具
- 两者能够一块儿工做
- 两者均可以经过插件拓展功能
- HMR是一个webpack插件，它让你能浏览器中实时观察模块修改后的效果，可是若是你想让它工做，须要对模块进行额外的配额；
- Babel有一个叫作react-transform-hrm的插件，能够在不对React模块进行额外的配置的前提下让HMR正常工做；
仍是继续上例来实际看看如何配置
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname + "/src/main.jsx", //入口文件
output: {
path: __dirname + "/build", //存放打包后的文件路径
filename: "bundle.js" //打包后的文件名
},
devServer: {
contentBase: "./public", // 本地服务器所加载的页面所在的目录
historyApiFallback: true, // 不跳转
inline: true // 开启实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js为结尾的文件
use: {
loader: "babel-loader", // 用babel-loader处理以上被匹配上的文件
// babel配置迁移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules里的文件
},
{
test: /\.css$/,
// 同一个文件类型使用多个loader用一个数组包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
},
}
},
{
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版权全部，翻版必究'),
new HtmlWebpackPlugin(({
template: __dirname + "/src/index.tmpl.html" // new 一个这个插件的实例，并传入相关的参数
})),
new webpack.HotModuleReplacementPlugin() // 热加载
],
};
复制代码
安装react-transform-hmr
npm install --save-dev babel-plugin-react-transform react-transform-hmr
复制代码
配置Babel
// .babelrc
{
"presets": ["react", "env"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
复制代码
如今当你使用React时，能够热加载模块了,每次保存就能在浏览器上看到更新内容。
优化插件
webpack提供了一些在发布阶段很是有用的优化插件，它们大多来自于webpack社区，能够经过npm安装，经过如下插件能够完成产品发布阶段所需的功能
- OccurenceOrderPlugin :为组件分配ID，经过这个插件webpack能够分析和优先考虑使用最多的模块，并为它们分配最小的ID
- UglifyJsPlugin：压缩JS代码；
- ExtractTextPlugin：分离CSS和JS文件
咱们继续用例子来看看如何添加它们，OccurenceOrder 和 UglifyJS plugins 都是内置插件，你须要作的只是安装其它非内置插件
npm install --save-dev extract-text-webpack-plugin
复制代码
而后再配置他们
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + "/src/main.jsx", //入口文件
output: {
path: __dirname + "/build", //存放打包后的文件路径
filename: "bundle.js" //打包后的文件名
},
devServer: {
contentBase: "./public", // 本地服务器所加载的页面所在的目录
historyApiFallback: true, // 不跳转
inline: true // 开启实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js为结尾的文件
use: {
loader: "babel-loader", // 用babel-loader处理以上被匹配上的文件
// babel配置迁移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules里的文件
},
{
test: /\.css$/,
// 同一个文件类型使用多个loader用一个数组包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
},
}
},
{
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版权全部，翻版必究'),
new HtmlWebpackPlugin(({
template: __dirname + "/src/index.tmpl.html" // new 一个这个插件的实例，并传入相关的参数
})),
new webpack.HotModuleReplacementPlugin(), // 热加载
new ExtractTextPlugin("style.css"),
new webpack.optimize.OccurrenceOrderPlugin(),
],
};
复制代码
缓存
缓存无处不在，使用缓存的最好方法是保证你的文件名和文件内容是匹配的（内容改变，名称相应改变）
webpack能够把一个哈希值添加到打包的文件名中，使用方法以下,添加特殊的字符串混合体（[name], [id] and [hash]）到输出文件名前
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
..
output: {
path: __dirname + "/build",
filename: "bundle-[hash].js"
},
...
};
复制代码
如今用户会有合理的缓存了。
去除build文件中的残余文件
引入clean-webpack-plugin插件后在配置文件的plugins中作相应配置便可：
安装：
npm install clean-webpack-plugin --save-dev
复制代码
配置：
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
plugins: [
...// 这里是以前配置的其它各类插件
new CleanWebpackPlugin()
]
复制代码
关于clean-webpack-plugin的详细使用可参考这里
最后
这是一篇好长的文章，谢谢你的耐心，能仔细看到了这里