webpack4.x使用踩坑

webpack.config.js简单配置:       

1.                                                                 
module.exports={
    entry:{
        a:'./src/index.js'
    },
    output:{
        path:__dirname+'/dist',
        filename:'bundel.js'
    }
}

2.

const path=require('path');
module.exports={
    entry:{
        a:'./src/index.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundel.js'
    }
}

3.     4.x版本可以修改配置文件名为:ltc.config.js

运行时候:webpack --config ltc.config.js

在package.json中配置script

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --config ltc.config.js"
  },

4. 多入口,多出口,html插件的使用,

建一个src,目录,里面有index.js,然后webpack.config.js配置

const path=require('path');
module.exports={
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

根目录建一个dist目录里面写个静态index.html测试如下:

 

webpack4.x以后在package.json配置一下:

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
 

多入口一个出口配置:建一个index2.js，目录结构如下:

module.exports={
    entry:['./src/index.js','./src/index2.js'],
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

最后打包生成:bundle.js

多入口多出口：

module.exports={
    entry:{
        index:'./src/index.js',
        index2:'./src/index2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js'
    }
}

最后生成:

这样就比较麻烦了,你要手动修改创建的dist目录下的index.html引用的文件名

5.借用html-webpack-plugin自动生成dist文件并且index.html自动引入依赖文件,生成页面

     cnpm i html-webpack-plugin -D

注意:html-webpack-plugin依赖webpack,和webpack-cli，这两个都需要本地安装一下

模版的使用:

module.exports={
    entry:{
        index:'./src/index.js',
        index2:'./src/index2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js'
    },
    plugins:[
       new HtmlWebpackplugin({

            hash：true,
             title:'webpack精髓',
             template:'./src/index.html'
       })
    ]
}

然后在./src/index.html配置即可(可设置hash：true清除缓存):

打包生成如下:

    
        
        
    
    
        
    

也可以设置：plugins:[
       new HtmlWebpackplugin({
             hash:true,
             minify:{
                 collapseWhitespace:true
             },
             title:'webpack精髓',
             template:'./src/index.html'
       })
    ]

整个HTMl空白的被压缩

后续更新.................................................