webpack简单安装及部分插件使用

初始化

初始化:

npm init 选择过程
npm init -y  没有过程选择，全部是默认的

[外链图片转存中…(img-WPMBUxm9-1617111722307)]

[外链图片转存中…(img-q4BfMs0F-1617111722312)]

安装webpack webpack-cli

安装webpack webpack-cli cli是可以让我们在命令行赞使用webpack

npm install webpack webpack-cli  -D

查找当前版本号

npx webpack-v		//查找当前的webpack版本
npm webpack-v		//查找全局目录的webpack版本

查找包版本

npm info 包名

简单的添加基本的js文件

npx webpack 文件名

webpack基本配置:

网址:https://webpack.docschina.org/concepts/#entry

[外链图片转存中…(img-7ytru0UF-1617111722316)]

const path = require('path')
//配置文件
module.exports = {
    //入口文件
    entry: {
        main: './index.js',
    },
    //出口文件 
    output: {
        // 配置文件
        //打包路径
	//__dirname是webpack.config.js文件所处的文件夹

        path: path.resolve(__dirname, 'dist'),
        //占位符 hash,contenthash,name 指的就是ertry里的文件名
        // contenthash的内容更改后hash也会改变
        filename: '[name].js'
    },
   
}

现在可以进行的打包命令

npx webpack --config ./webpack.config.js
npx webpack //省去config配置,会自动积webpack.config.js配置文件

需要规范化:

//在packge.json中的scripts中
"scripts":{
    "bulid":"webpack"
}

进行到这一步时候已经可以使用命令进行打包:

npm run bulid

将js文件在html文件中模拟

但是这个时候，打包后生成还是.js文件，自己需要进行修改.这时候就需要用到html-webpack-plugin

npm install html-webpack-plugin -D

在webpack.config.js中进行配置

const htmlwebpackplugin =require('html-webpack-plugin');
//在出口文件中写入
plugins;[
    new htmlwebpackplugin()
]

这个时候进行打包命令时就会自动生成html并且会将文件自动添加引用

如果想使用html模板页的话进行如下配置

//在出口文件中写入
plugins;[
    new htmlwebpackplugin('模板文件')
]

文件清空重新进行打包

但是这样的话就很容易添加多个文件或者说文件打包重复。这个时候可以用插件:clean-webpack-plugin

//安装指令
npm install clean-webpack-plugin
//在webpack配置文件中添加
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
new cleanwebpackplugin()

后续会进行更新，各位下次再见！！！