手记

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

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'
        })
    ]
};

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

npm run start
npm run server
2人推荐
随时随地看视频
慕课网APP