webpack的简单使用

一、安装webpack

全局安装：

npm install wabpack –g     /*（webpack –h  查看安装是否完成）*/

本地的开发环境安装：

npm install --save-dev webpack      /*（可能会使用到webpack自带的一些工具。所以全局和本地都安装一下！）*/

根目录下新建一个webpack.config.js的文件，用来编写和 webpack 相关的配置。

二、合并脚本原理：

脚本模块 A 依赖同目录下的脚本模块 B 和 C：

// A.js:
import {*} from './B.js'; // E6 Modules
const C = require('/C.js'); // CommonJS

A是入口模块（从模块A进入之后就能找到我们应用需要的所有模块），并且我们需要指定一个打包后的输出文件，比如叫bundle.js，那么我们在webpack.config.js的配置文件里可以这么写：

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

接下来打开命令行（cmd），切换到开发的根目录，运行webpack，合并后的bundle.js即输出生成了。
entry属性表示入口模块，output属性表示输出脚本。这里有两点可以改进：

entry属性的值可以是一个数组，意味着可以允许有多个入口模块
output对象中还可以添加path属性，表示要输出的路径（必须为绝对路径，所以可以借助Node.js的path.resolve或者path.join方法）；而在filename中填上文件名即可

三、 Webpack支持的脚本模块规范

不同项目在定义脚本模块时使用的规范不同：

（1） Node.js 中的CommonJS规范

（2） ES6 Modules的模块规范

（3） AMD模块规范（参考RequireJS）

四、监视修改，自动打包

module.exports = {
    entry: './A.js',
    output: {
        filename: './bundle.js'
    },
    watch: true
}

wepack.config.js文件中添加watch参数，告诉webpack监视文件的变化。一旦发生变化后自动打包

五、设置别名，缩短引用的路径

实际项目中源文件不会放在项目的根目录中，而是集中放在某个文件夹内，比如叫src。并且文件夹中又会再次将文件分类，例如分为srcipts和styles，scripts中又会添加为components和utils。components中下又有具体的组件文件夹等等。
引用模块或者组件时常常会发生这样的情况，引用名称冗长无比：

require('./src/scripts/components/checkbox/checkbox.js');

可以在webpack配置文件中添加一个“代号”代指这个路径。这就是alias字段。alias字段必须添加在resolve字段下：

module.exports = {
    entry: './A.js',
    output: {
        filename: './bundle.js'
    },
    resolve: {
        alias: {
            Components: path.join(__dirname, '..', 'src', 'scripts', 'components')
        }
    },
    watch: true
}

当我们需要引用./src/scripts/components目录下的组件时，引用的路径只是Components/checkbox.js就好了

六、当有很多配置文件，所有配置文件放在config文件夹里面的操作。

有时我们不希望把配置文件放在根目录，因为配置文件可能有很多，开发时的配置文件，上线时的配置文件，测试也需要配置文件。

于是我们可以把所有的配置文件都放在一个文件夹中管理，例如叫做config。但此时入口文件app.js则与配置文件不在同一个目录中，则需要新增配置参数告诉webpack去哪里找app.js。这个配置参数就叫做context。

结构关系：

Root
|---config
    |---webpack.config.js
|---app.js

context值如下所示，务必使用绝对路径：

module.exports = {
    entry: './A.js',
    context: path.join(__dirname, '..'),
    output: {
        filename: './bundle.js'
    }
}

在根目录运行webpack时，则需要指定配置文件：

webpack  --config config/webpack.config.js

七、配置各个开发环境的运行命令（dev 、pl、线上等等）

我们把配置文件统一放入config文件夹中后，每次打包时都需要输入一长串的webpack –config config/webpack.config.js，这样非常不便。于是我们可以把命令添加进入每个项目都有的package.json文件中即可。

开发环境：

我们要执行的命令放入scripts对象中，因为是开发环境，所以我把这个命令取名为dev：

Dev环境

{
    "name": "",
    "version": "",
    "scripts": {
        "dev": "webpack --config config/webpack.config.js"
    }
}

当你需要运行webpack命令时，只需要运行npm run dev就可以了。其中的dev是可以变化的参数，你可以继续往scripts字段中的添加其他的参数。

PL环境：

{
    "name": "",
    "version": "",
    "scripts": {
        "pl": "webpack --config config/webpack.config.js"
    }
}

这里引入pl 阶段的webpack.config.js，运行的话执行

npm run pl

八、通过loader 将样式文件和图片引入进来一起打包

入口文件 app.js 中引入样式文件

require('./styles/style.css');

样式打包进脚本的效果是什么样的？实际情况是，当你打开包含最终脚本bundle.js的页面时，你会发现样式代码已经注入进页面的head中了。

默认情况下webpack只认识js文件，所以它只能打包js文件。你可以通过给 webpack 添加 loader 来让 webpack 识别更多的文件类型。比如我们可以添加style-loader和css-loader让 webpack 识别样式文件并且打包，并且注入页面中。
让我们安装样式相关的loader：

 npm install --save-dev style-loader css-loader

安装完毕之后，我们还需要对loader进行配置。告诉这个loader应该指定对哪些文件进行识别和处理，在webpack.config.js中添加对loader的配置，添加在module字段中：

（1） test是一个正则表达式用于匹配使用该loader的文件 loaders则表示使用了哪些loader
（2）新版本的webpack中，loaders数组中loader名称一定要加上-loader后缀，否则打包时会出错
（3）排除某些目录，通过添加exclude字段，注意需要使用绝对路径：

module: {
loaders: [{
test: /\.css$/,
     exclude: path.join(__dirname, )
loaders: ['style-loader', 'css-loader']
   }]
}

九、插件的使用

如果你有打开上面所说的打包后的bundle.js文件的话，你会发现这个文件内容是未压缩。在开发中我们存在类似的需求例如对最终文件进行压缩。此时我们就需要使用到插件（plugin）了。
使用插件：

在webpack2中webpack已经自带了一些插件，例如压缩脚本代码用的UglifyJsPlugin。

（1）在文件头部引用webpack类库：
const webpack = require(‘webpack’)
（2） plugins字段下新建一个实例：

plugins: [
    new webpack.optimize.UglifyJsPlugin()
]

同时你也可以在UglifyJsPlugin构造函数调用中传入参数对插件进行配置。

十、在webpack 中安装Babel

Babel在Webpack中是以Loader的形式存在：

（1）安装Babel的核心组件Babel-core和Babel-Loader。安装编译ES6的babel-preset-es2015和babel-preset-react。

npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react

babel-preset-es2015  //---------编译ES6
babel-preset-react   // ---------编译react

(2) 在根目录下建立一个名为.babelrc的配置文件 (配置 babel)
告诉Babel使用这俩个presets

{
    "presets": [
        "es2015",
        "react"
    ]
}

(3) 在webpack.config.js中进行对babel的配置，添加新的loader：

loaders: [{
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader']
}, {
    test: /\.js|jsx$/,
    exclude: '/node_modules/',
    loaders: ['babel-loader']
}]

验证项目：

（1）

npm install react react-dom –save

（2） src/scripts/下新建一个文件夹react_components, 并添加一个组件文件：head.jsx，内容如下：

import React from 'react';

export default class Head extends React.Component {
  render() {
    return (
     <div>
        <h1>Hello World 02</h1>
      </div>
    )
  }
}

（3）接下来在app.js添加以下内容：

const React = require('react');
const ReactDOM = require('react-dom');
import Head from './src/scripts/react_components/head.jsx';

ReactDOM.render(
    <Head />,
    document.querySelector('.container')
)

一、安装webpack

全局安装：

本地的开发环境安装：

根目录下新建一个webpack.config.js的文件，用来编写和 webpack 相关的配置。

二、 合并脚本原理：

三、 Webpack支持的脚本模块规范

四、 监视修改，自动打包

五、 设置别名，缩短引用的路径

六、当有很多配置文件， 所有配置文件放在config文件夹里面的操作。

七、 配置各个开发环境的运行命令（dev 、pl、 线上等等）

八、 通过loader 将样式文件和图片引入进来一起打包

九、 插件的使用

十、 在webpack 中安装Babel

猜你喜欢