【webpack】从零开始建项目和打包配置

从零开始建项目和打包配置
1.npm install yarn -g
yarn是什么
2yarn init -y初始化项目

其实就是新建了package.json文件，以后项目安装的依赖都会记录到这个文件

3.安装webpack，webpack-cli
yarn add webpack webpack-cli -D

4.新建一个src目录，src里存放我们的项目文件

在src目录下新建一个index.js,index.html写上一些内容
（index.js是打包入口，index.html是打包模板）

5.新建webpack.config.js文件，这就是我们的webpack配置文件了

为什么是新建这个文件名？
因为在node_module/webpack-cli/bin/config/config-yargs.js文件中module.exports模块options选项，config对象中的defaultDescription属性已经规定了配置文件的名称

文件结构

图片.png

6.webpack配置
我们之前已经知道webpack只能打包js文件，对于其他css，html文件就需要使用loader或者plugin进行处理

重点：loader的执行是从下到上，从右到左的

这里先说基本配置

let path = require('path')
module.exports = {
  entry: './src/index.js',  // 打包入口文件
  output: {
    filename: 'bundle.js', // 打包成bundle.js文件
    path: path.resolve(__dirname, 'build'), 
    // path属性必须是绝对路径
    // 打包后放在config文件同级的build文件夹下
  },
  // 使用plugin配置
  plugins: [
  ],
  // 使用loader配置
   module: {
      rules: [
       ]
    }
}

新建一个index.css文件，里面写样式。然后在在index.js文件中引入

import './index.css'

这样打包出来的样式是写在了js文件里面的
打包成一个独立的css文件

如何使用loader？

以css-loader为例（打包css文件）
安装：yarn add css-loader -D
使用：

{
   test: /\.css$/,
   loader: 'css-loader'
}

如何使用plugin？

以html-webpack-plugin为例（自动把打包的js文件挂到html上）
安装：yarn add html-webpack-plugin -D
引入：let HtmlWebpackPlugin = require('html-webpack-plugin')
使用：在plugins数组中，new一个插件的实例

new HtmlWebpackPlugin({
      template: './src/index.html', // 就是刚刚的新建的index.html为模板
      filename: 'index.html',  //打包后生成index.html文件
      // 压缩代码
      minify: {
        removeAttributeQuotes: true, //删掉双引号
        collapseWhitespace: true,//删除空格、换行
      },
      hash: true //把html文件里引入的js文件路径加密
    }),

每个插件都有不同的属性，具体可以百度一下进行配置

7.打包
有两个选择
①npx webpack：这个命令含义就是，运行webpack，如果webpack没有安装就会安装webpack
② 配置打包命令
在package.json文件中，配置script字段

"scripts": {
    "build": "webpack --config webpack.config.js",
  },

含义：按照webpack.config.js文件配置进行打包
所以你想要按照其他文件进行打包时，在cmd输入这个命令webpack --config webpack.config.js，把config后面的文件名换掉

打包效果

image.png

运行index.html可以看到script文件的一下效果

图片.png

简单的打包就做好了