webpack--学习记录--基础一

1、初始化一个项目，要有package.json文件

在目录文件中执行npm init -y之后就会自动创建一个package.json

{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

2、安装webpack、webpack-cli

npm install webpack webpack-cli -D

3、在目录下创建一个src/index.js文件，使用webpack打包

打包命令   npx webpack
webpack会自动找src/index.js下的文件当做入口去进行打包
输出到dist/下的index.js   在不进行配置下，src/index.js和dist目录都是webpack默认的

这里因为没有html文件，所以在打包完之后需要自己手动新建一个html文件，然后引入js，在浏览器查看效果

4、如果需要自己定义一个配置文件，可以取名叫webpack.config.js，使用命令npx webpack也会找这个文件，如果换其他文件名，例如：prod.config.js则需要在package.json中的script中配置

"dev": "webpack --config prod.config.js --mode development"

dev是可以执行的命令：npm run dev dev这个名字可以更换后面的是你要执行指定的webpack配置文件

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

这里在后面指定了--mode，不指定的话在编译会报错，也可以在配置文件中指定：

module.exports = {
  mode:'development'
}

下面开始wenpack的详细配置介绍

5、webpack的核心概念

  module.exports = {
  	entry:'./src/index.js' // string | object   webpack 执行构建的入口  默认："./src/index.js"
    output:{
      path:path.resolve(__dirname, 'dist')
    }, // 配置资源输出位置和名称   必须是绝对路径  例如  path.resolve(__dirname, 'dist')
    mode:"", // 打包构建模式 =》开发模式和生产模式   区别是：开发模式不会压碎代码，方便调式和读取，生产模式压缩代码
    module:{},// 模块，webpack基于node，有一切皆模块概念   这里会配置一些规则，例如loaders
    plugins:[],// webpack功能扩展
  }

6、webpack默认只能打包js和json，如果遇到css,img等静态资源都需要loader进行预处理，例如写一个css

在src/assets/common.css

body{
  background:red
}

/src/index.js中导入

  import from "./assets/common.css"

这样打包时候会报错,原因就是webpack不能打包css文件，所以需要加loader去处理需要先下载css-loader和style-loader

loader加载顺序一定要写对，因为是按照从左到右加载的

css-loader的作用很单一，只是处理css文件，但并不会插入到页面，而style-loader的作用是创建一个style标签，将css内容插入，然后将style标签插入到body的head标签中，然后打包才会生效

prod.config.js

module.exports = {
  module: {
    rules: [{
        test: /\.css/,
        use: ["style-loader", "css-loader"]
      }
  ]
  },
}

7、在实际项目中我们都需要自己手动创建html文件，因为webpack中有插件可以指定模板然后生成一个模板在dist目录中

可以使用 html-webpack-plugin 使用npm install html-webpack-plugin -D 下载

需要在目录下先创建一个html文件，作为生成模板，这样打包之后就会有html文件，不再需要手动创建，并且会自动引入生成的js文件

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [new HtmlWebpackPlugin({
      title: '测试',
      template: 'public/index.html' // 将指定文件作为生成html的模板
    }),
    new CleanWebpackPlugin(), // 清除dist文件
    new MiniCssExtractPlugin({  // 这个是可以将css文件单独抽离，之后会写到
      filename: 'assets/[name].css'
    })
  ]
}