首页手记学习webpack...

学习webpack (v3.8.1)笔记（二）——loader和plugin

标签：

Node.js JavaScript 前端工具

1. babel
①在命令行安装babel，命令行：npm install --save-dev babel-core babel-loader babel-preset-es2015
②在webpack.config.js中的module项配置：

module:{
    rules: [  //匹配规则
        test: /\.js$/,  //一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
        use: {
            loader: 'babel-loader'  //loader的名称（必须）
        },
        exclude: /node_modules/  //屏蔽不需要处理的文件（文件夹）（可选）；
    ]
}

③再创建.babelrc文件并配置

{"preset":["es2015"]}

这样你就可以愉快的使用es6来编码了

2. CSS

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中

①在命令行安装css-loader和style-loader，命令行：

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

②在webpack.config.js中的module项配置：

module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }

③再自行创建一个css文件

④在main.js中引入 import './css/main.css';

通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的。

CSS Module

CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递到所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中使用相同的类名造成冲突。

①在webpack.config.js的css-loader规则里加option属性，

                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }

②创建一个css文件

③导入到你想放的模块中，如：我导入到hello.js中

import config from './data/hello.json';
import styles from './css/hello.css';//导入
module.exports = function() {
    var hello = document.createElement('div');
    hello.textContent = config.helloText;
    hello.className = styles.root;//增加类名
    return hello;
};

这样就可以了

3. 插件（Plugins）

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）

HtmlWebpackPlugin

这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。

①安装html-webpack-plugin，npm install --save-dev html-webpack-plugin

②把原来的index.html改名为index.tmpl.html，并放到app文件夹目录下

③在webpack.config.js中引入html-webpack-plugin插件，并在module中配置plugins

const path = require('path');
// const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// __dirname变量获取当前模块文件所在目录的完整绝对路径
module.exports = {
    // devtool: 'eval-source-map',
    entry: __dirname + '/app/main.js',//入口
    output: {
        path: path.resolve(__dirname, 'dist'),//出口
        filename: 'bundle.js'  //输出的文件名
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
        // port:设置默认监听端口，如果省略，默认为”8080“
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tmpl.html'
        })
    ]
};

④在命令行重新编译和重启