webpack4.x webpack.config.json文件、静态文件输出的使用 第九节

在webpack中使用json配置

json-loader

到了webpack3.x以上版本之后就不用装了,json可以默认识别

在根目录下创建webpack.config.json文件,这里仅仅举例子,可以配置的很多

{
    "entry":"./src/index.js",
    "port":"8090",
    "host":"localhost"
}

在webpack.config.js中引入webpack.config.json文件

//webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Webpack = require('webpack');
//onst Uglify = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');

const jsonConfig = require('./webpack.config.json'); //引入webpack.config.json

-

module.exports = {
    entry:{
        entry: jsonConfig.entry //读取webpack.config.json配置
    }, 
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name]-bundle.js' 
    },
    module:{ //我写一个module
        //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
        rules:[
            {
                // test 表示测试什么文件类型
                test:/\.css$/,
                // 使用 'style-loader','css-loader'
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader', // 回滚
                    use:[
                        {loader:'css-loader'},
                        {loader:'postcss-loader'} //利用postcss-loader自动添加css前缀
                    ],
                    publicPath:'../' //解决css背景图的路径问题
                })
            },
            {
                test:/\.less$/,
                use:ExtractTextPlugin.extract({ //分离less编译后的css文件
                    fallback:'style-loader',
                    use:['css-loader','less-loader']
                })
            },
            {
                test:/\.(sass|scss)$/,
                use:['style-loader','css-loader','sass-loader']
            },
            {
                test:/\.(js|jsx)$/,
                use:['babel-loader'],
                exclude:/node_modules/
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                        limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                        outputPath:'images' //定义输出的图片文件夹
                    }
                }]
            }
        ]
    },
    devServer:{
        contentBase:path.resolve(__dirname,'dist'), //最好设置成绝对路径
        host:jsonConfig.host,
        port:jsonConfig.port,
        open:true,
        hot:true
    },
    devtool: 'source-map', //开启调试功能,上线之前需将此行注释
    plugins:[
        // Uglify是压缩js,现在已经不需要了,只需要在script里面写成
        // "build": "webpack --mode production", 就自动压缩额
        //new Uglify(),  
        new Webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            title:'Hello World',
            template: './src/index.html' //模板地址
        }),
        new ExtractTextPlugin('css/index.css'), //都提到dist目录下的css目录中,文件名是index.css里面
        new PurifyCssWebpack({ //消除冗余代码
            // 首先保证找路径不是异步的,所以这里用同步的方法
            // path.join()也是path里面的方法,主要用来合并路径的
            // 'src/*.html' 表示扫描每个html的css
            paths:glob.sync(path.join(__dirname,'src/*.html')) 

        })
    ]
}

---

静态资源输出文件:copy-webpack-plugin插件

在我们的src/assets目录里面有一些静态文件如图片、文档什么的,这些文件是不用编译的,我们希望这些文件原封不动的复制粘贴出去

copy-webpack-plugin:

1. 下载

   cnpm i copy-webpack-plugin -D
   

2. 引入

   const CopyWebpackPlugin = require('copy-webpack-plugin');
   

3. 使用

   plugins:[
       // Uglify是压缩js,现在已经不需要了,只需要在script里面写成
       // "build": "webpack --mode production", 就自动压缩额
       //new Uglify(),  
       new Webpack.HotModuleReplacementPlugin(),
       new HtmlWebpackPlugin({
           title:'Hello World',
           template: './src/index.html' //模板地址
       }),
       new ExtractTextPlugin('css/index.css'), //都提到dist目录下的css目录中,文件名是index.css里面
       new PurifyCssWebpack({ //消除冗余代码
           // 首先保证找路径不是异步的,所以这里用同步的方法
           // path.join()也是path里面的方法,主要用来合并路径的
           // 'src/*.html' 表示扫描每个html的css
           paths:glob.sync(path.join(__dirname,'src/*.html')) 
   
       }),
       new CopyWebpackPlugin([ //支持输入一个数组
           {
               from: path.resolve(__dirname, 'src/assets'), //将src/assets下的文件
               to: './public' // 复制到publiv
           }
       ])
   ]