webpack的安装和基础配置

webpack的学习 - 第1天

一、webpack的基础配置

1、webpack 安装和基础配置

1. 安装本地的webpack,需要安装 webpack 和 webpack-cli -D
2. webpack 可以进行0配置
   • 打包工具 -> 输出后的结果(js模块)
   • 打包（支持我们的js模块化）
3. 手动配置webpack
   • 默认配置文件的名字 webpack.config.js
   • 配置文件的文件名也是可以修改的，修改后可以通过命令来找到

     	npx webpack --config webpack.config.my.js
     

4. 在 package.json配置里可以配置npm的执行命令

	"scripts": {
	    "build": "webpack",  //打包的命令
	    "dev": "webpack-dev-server" //开启一个服务，通过服务访问页面
	  },
	  //配置好后 执行 npm run build 即可进行打包

2、文件解析 和 html插件

1）想用localhost开头的地址访问文件
需要先安装一个依赖

yarn add webpack-dev-server -D
npx webpack-dev-server

然后在webpack.config.js里对 devServer 进行一些服务器的配置

devServer:{ //开发服务器的配置
       port:3000,
       progress:true,
       contentBase: './dist'
   }

2. 如果没有html文件，打包后自动创建一个html文件
   需先安张一个插件

yarn add html-webpack-plugin -D

安装成功后在webpack.config.js文件引入后，在进行一下配置

 plugins:[ //数组 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template:'./src/index.html', //打包之前html的文件模板
            filename:'index.html', //打包后的文件名
            minify:{
                removeAttributeQuotes:true,//删除属性的双引号
                collapseWhitespace:true //折叠一行
            },
            hash:true //为引入的js配置一个hash戳
        })
    ]

3）webpack.config.js的基本配置项

//webpack 是node写出来的node的写法
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    devServer:{ //开发服务器的配置
        port:3000,
        progress:true,
        contentBase: './dist'
    },
    //mode: 'development', //模式 默认两种 production development
    mode:'production',
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.js', //打包后的文件名
        path: path.resolve(__dirname,'dist'), //路径必须是一个绝对路径
    },
    plugins:[ //数组 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            minify:{
                removeAttributeQuotes:true,//删除属性的双引号
                collapseWhitespace:true //折叠一行
            },
            hash:true //为引入的js配置一个hash戳
        })
    ]
}