webpack入门简单配置

webpack安装

• 安装本地的webpack

• webpack webpack-cli -D (-D标识上线的时候不需要他们打包)

webpack可以进行0配置

• 初始化项目npm init -y
• 项目webpack安装参考上述
• 打包工具 - > 输出后的结果 （js模块）
• 打包（支持我们js的模块化）

此过程不需要进行任何webpack的任何配置，执行npx webpack会自动编译生成dist目录

如果需要修改执行命令可以在package.json文件中进行脚本配置；

例如：

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

这样就可以通过npm run build命令来执行编译，通过npm run dev命令来启动本地服务进行查看；

手动配置webpack

• 默认配置文件的名字 webpack.config.js

  //webpack 是node写出来的 node写法
  let path = require('path');//依赖
  let HtmlWebpackPlugin = require('html-webpack-plugin');//用来处理输出的路径配置
  module.exports = {
      devServer: { //开发服务器配置
          port: 8080, //端口
          progress: true, //进度
          contentBase: './dist',
          compress: true
      },
      mode: 'development', //模式 分两种 development开发 production生产
      entry: './src/index.js', //入口
      output: { //输出
          filename: 'bundle.[hash:8].js', //打包后的文件名
          path: path.resolve(__dirname,'dist') //打包后文件的存储位置，路径必须是一个绝对路径
      }，
      plugins: [//数组 存放所有webpack插件
      	new HtmlWebpackPlugin({
      		template: './src/index.html',
      		filename: 'index.html',
      		minify: { //压缩html
      			removeAttributeQuotes: true,//去除属性的引号
      			collapseWhitespace: true //折叠空行
  			},
      		hash: true //解决缓存
  		})
      ]
  }