webpack配置多页应用-3

一、使用babel编译es6语法

引入css文件我们只需在入口文件里requirecss文件进来即可，当然也可以使用es6的import语法。这样的话我们得先安装es6转es5的加载器babel啦。具体步骤

1.安装相关模块

npm install --save-dev babel-core babel-loader babel-preset-env

2.在webpack.config.js中添加loader

{
    test: /\.js$/,
    exclude: [/node_modules/, /lib/],
    loader: 'babel-loader'
}

3.根目录新增.babelrc配置文件

{
    "presets": ["env"]
  }

这里webpack和babel版本需要匹配具体可以参考问题杂记-webpack使用遇到的问题

二、引入css文件

现在我们已经可以使用import语法importcss文件了。这里只是可以import进来，但是样式不会生效，因为我们没有对css文件进行处理所以接下来需要相应的loaderstyle-loader和css-loader来引入css文件并让其生效

1.他们两的作用

css-loader: 输出CSS作为JS模块
style-loader:使用<style>将css-loader内部样式注入到我们的HTML页面

2.安装模块

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

3.配置webpack.config.js

{  
                test: /\.css$/,  
                use: ['style-loader', 'css-loader']  
  }

三、提取css到单独文件

经过前面的步骤我们已经可以将css文件引入到js中了，这里的css会被打包进js文件中,因此无法利用浏览器的异步和并行加载CSS的能力，我们现在需要将css文件单独提取到一个css文件里应该怎么做，这时就需要用到extract-text-webpack-plugin这个插件将其提取出来了

//css
let extractCSS = new ExtractTextPlugin('css/[name].css?[hash]')
let cssLoader = extractCSS.extract({
    fallback: "style-loader",
    use: "css-loader"
})

module: {
        rules: [{
                test: /\.css$/,
                exclude: /node_modules/,
                loader: cssLoader
            },
...]
}

plugins: [
        //...,
        extractCSS
    ]

编译结果

四、图片字体等的引入

有的css中使用了字体等，这时我们需要使用file-loader或者url-loader进行加载

file和url的区别是url封装了file-loader功能更强大，可以将小文件编码并返回DataURL

1.安装

npm -i -d url-loader file-loader

2.配置

{
                test: /\.(png|svg|jpg|gif)$/,
                use: [{
                        loader: 'file-loader',
                    
                    },
                    {
                        loader: 'image-webpack-loader', //压缩
                        options: {
                            bypassOnDebug: true,
                        },
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },

五、html中直接使用img标签src加载图片

使用html-withimg-loader 详细介绍点击打开链接

const htmlPlugin = new HtmlWebpackPlugin({
            filename: `${filename}.html`,
            template: `html-withimg-loader!${filePath}`,
            chunks: [filename,'vendor'],
        });

在此，基本上算是处理完了，其它的需求再根据自己的需要使用相应的加载器、插件即可

源码地址点击下载

webpack配置多页应用-3

猜你喜欢