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

清疚 2022-05-28 14:10 221阅读 0赞

**在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 } ]) ]