webpack学习的记录（三） 一篇带你搭建一个webpack4.0

这个是工程链接 https://github.com/soGooday/canvasWF

前言

笔者为了学习webpack感觉也是走了不少的弯路。有很多点想知道，但是找不到。下面笔者就带着大家带着你快速的入门。

这篇文章的宗旨的-我先带着你搭建起来。等你能跑通了，再去看那这些参数是做什么的，我会把官方的链接放在需要使用到的代码下面

默认你已经安装好了node.js

下面我们先初始化一个node.js的环境

我们需要提前知道的是webpack是webpack  node.js是node.js 我们第一步是创建一个node.js 跟webpack还没有关系。打开一个文件夹，crtl+鼠标右键->从此处打开命令窗口  然后我们在cmd上面输入下面的指令，初始化node.js的环境。为搭建webpack做基础 

npm init -y

 然后呢 你就会看下面的图片

安装webpack 

然后呢我们开始安装webpack与webpack-cli的包

这一步我们才开始安装webpack的，之前并没有

怎么安装呢 还是在命令行下面输入下面内容

npm install webpack webpack-cli -D

然后你就会看到多出来的东西。这些东西，才使得我们真正的创建好了webpack的环境。 

 那我们如何使用webpack呢

跟我一起来。

在刚刚创建的文件甲里面创建一文件 src

 然后在src里面创建一个index.js，因为src/index.js是webpack默认的开始打包的文件， 其实我们可以通过配置webpack.config.js来修改这个路径，但是这个我们后面再管。我们现在的第一要义就是让webPack跑起来

在index.js里面写一句话

console.log('你好呀，我是来测试的');

好像我刚刚有人叫我说等下你，你遇见了使用上面的指令出现了 webpack不可见指令的报错 就是下面的这附图，为了模拟的神东，你就把a当做是webpack

不过没有关系，我带你去处理

安装下面的指令 我们全局安装就会处理掉这个问题

然后我们在根目录下，再次打开刚刚我们输入指令的地方。是的就是把刚刚的-D换成可-g

npm install webpack webpack-cli -g

 这样的话 你是不是就没有问题啦。什么你问我为什么会这样。等你看完下面这位大大写的文章，我想你就明白了

https://blog.csdn.net/weixin_44135121/article/details/90513634

 打包&启动

我们输入如下的指令

webpack --mode=development

 是不是看到了下面的平旷，恭喜你，已经学会了使用webpack进行打打包了，

配置package.json

好了，如果你并不知道刚刚的指令是做什么的。不着急，搜索一下，你就会明白，但是我们并不知我们目的，目的是带你快速搭建起来webpack包

我们打开package.json文件是的就是下面这个

 我们呢要写上几句话

 因为这样我们就可以使用一些简单的指令了

    "build:d": "webpack --mode=development --progress --color",
    "build:p": "webpack --mode=production --progress --color",
     "dev": "webpack-dev-server --inline --open"//这个是边写边测试而是用的

本地边写边看效果

下面我们就来看下怎么实现这个功能

还是刚刚cmd的命令行工具（根目录下） 输入如下的指令

npm install webpack-dev-server -D

成功之后

在cmd继续输入 

npm install html-webpack-plugin -D

上面的啷个指令按钮的东西，在下面你会用得到哦

写一个这样为js文件

webpack.config.js

 内容是

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path');

module.exports = {
    entry: {
        app: './src/index.js', 
      },
      output: {
        filename: '[name].js',
        path: __dirname + '/dist'
      },
    plugins:[
        new HtmlWebpackPlugin(), 
    ]
}

我知道你想问 这是干嘛的，我们先跑起来再说，上面的处理完毕，我们就要显示了

在刚刚的cmd指令框中打入 如下的指令

npm run dev

你就会看见

 按住ctrl然后自动调取浏览器，但是你会看见空白的浏览器页面，没关系，打开开发者模式 谷歌浏览器默认是F12 

 是不是看见自己的刚刚写的话了。我下面还会继续写

index.htm模板

经过前面的探索，我猜你肯定会问，那我怎么定制自己的index.html。而不是生成压缩 index.js的这个入口文件。然后再生成

dist的文件下手动的创建index.html然后在手动的引入相应的脚本。

下面我们就学习如何完成这个需求。

在根目录下打开cmd。然后我们需要安装上html-webpack-plugin,这个npm 的包

npm install html-webpack-plugin -D

 然后呢 我们就需要处配置的使用一下。webpack.config.js这个文件。

我们在根目录下创建一个文件名字加后缀=webpack.config.js

然后打开打开这个文件如下

 下面书具体的内容

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path');


module.exports ={
    entry: './src/index.js',//这个是我们的入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),//这个设置生成为文件放在那里
        filename: 'bundle.js',//生成的js文件名字叫什么
    },
    plugins: [//插件 及的是  plugins 而不是 plugin
        new HtmlWebpackPlugin({
          filename: 'index.html', // 配置输出文件名和路径
          template: './src/index.html', // 配置文件模板--
        }),
      ],

}

上面就是这个这个具体的文件

其中的插件我们之使用到了 2个参数 分别是 模板路径 及其生成模板的名字

 new HtmlWebpackPlugin({
          filename: 'index.html', // 配置输出文件名和路径
          template: './src/index.html', // 配置文件模板--
        }),

 下面就是模板的文件

 此时的你 才一次使用 npm run build:d 你就会发现在disti下面生成了相关的两个文件

此时我们使用 npm run dev 进入到dist的目录下 我们就看到了

构建 CSS

我们需要使用两个两个 loader 

• css-loader 负责解析 CSS 代码，主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明；
• style-loader 会将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效

npm install css-loader style-loader -D

 经由上述两个 loader 的处理后，CSS 代码会转变为 JS，和 index.js 一起打包了。

然后我们在webpack.config.js里面添加下面的相关代码，这个意思就是如何使用我们上面的的两个loadier

module.exports = {
//主要是下面的这些代码
  module: {
    rules: [
      // ...
      {
        test: /\.css/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  }
}

同时我们在src的目录下 创建一个文件 名字叫做index.css

然后在src的目录下的index.js 上面写上

import "./index.css"

这样就可以使用webpack咋打包的时候，会自动打包到然后的js文件中（因为单反是入口文件使用到的相关文件都会被webpack处理掉）；

为了测试使用。我们在src的index.html的文件中

<body>
    <p>我是来测试css的引用的</p>
</body>

然后我们使用 npm run dev我们就会看到如下界面

说明我们这一步CSS 预处理器 是成功了

 CSS 预处理器

在上述使用 CSS 的基础上，通常我们会使用 Less/Sass 等 CSS 预处理器，webpack 可以通过添加对应的 loader 来支持，以使用 Less 为例，我们可以在官方文档中找到对应的 loader。

我们需要在上面的 webpack.config.js 配置中，添加一个配置来支持解析后缀为 .less 的文件：

我们需要安装上less

npm install less-loader -D

module.exports = {
  // 主要部分 是下面的代码
  module: {
    rules: [
     {
        test: /\.less/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  // ...
}

处理图片文件

在前端项目的样式中总会使用到图片，虽然我们已经提到 css-loader 会解析样式中用 url() 引用的文件路径，但是图片对应的 jpg/png/gif 等文件格式，webpack 处理不了。是的，我们只要添加一个处理图片的 loader 配置就可以了，现有的 file-loader 就是个不错的选择。

file-loader 可以用于处理很多类型的文件，它的主要作用是直接输出文件，把构建后的文件路径返回。配置很简单，在 rules中添加一个字段，增加图片类型文件的解析配置：

老规矩，在根目录下我们先安装一下。下面的相关内容

npm install file-loader -D

在webpack.config.js中添加如下的内容

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
}

使用 Babel

Babel 是一个让我们能够使用 ES 新特性的 JS 编译工具，我们可以在 webpack 中配置 Babel，以便使用 ES6、ES7 标准来编写 JS 代码。

具体的安装 看下这个网址

https://blog.csdn.net/weixin_44539392/article/details/86532913

 安装一下 如下的包

npm i [email protected]
npm i [email protected]
npm i [email protected]
npm i [email protected]
npm i [email protected]

三.创建配置文件,在项目根目录下创建一个名为 “.babelrc” 的文件，注意该文件名前面有一个点,填写如下内容

{
  "presets": ["env","stage-0"],
  "plugins": ["transform-runtime"]
}

打开webpack.config.js配置文件(如果没有该文件你需要手动去创建,然后可以去webpack的官网找到相应的配置)填写如下配置

module: {
      rules: [
        {test: /\.js$/,exclude: /(node_modules)/,use: "babel-loader"}
      ]
}

exclude这个必须加,如果不加的话在打包的时候会吧node_modules目录下的js文件也一起打包过去，这样的话会耗费电脑的资源，同时打包出来的文件也无法使用。

此内容来自 https://www.cnblogs.com/Richard-Tang/p/9875607.html 大佬的教程

 webpack.config.js

下面有几个plugin是我自己添加的一些作用 比如压缩 copy图片及其自动清除dist目录

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const uglify = require('uglifyjs-webpack-plugin'); //js压缩插件
const path = require('path');

module.exports = {
    entry:'./src/index.js',
    output: {
      filename: 'index.js',
      path: __dirname + '/dist',
      // publicPath:'./src/'
    },
    plugins:[ 
        new HtmlWebpackPlugin({
            filename: 'index.html', // 配置输出文件名和路径
            template: './src/index.html', // 配置文件模板
        }), 
        
        new CleanWebpackPlugin(),
        new uglify(
          // {//js压缩插件
          // cache: false,//启用文件缓存
          // parallel: true,//使用多进程并行运行来提高构建速度
          // sourcMap: true//使用源映射将错误消息位置映射到模块（这会减慢编译速度）
          // }
        ),
        new CopyWebpackPlugin([
          {
            from: './src/images',
            to: './images',
            ignore: ['.*']
          }
      ])
    ],
    module: {
      rules: [
        // 对css的解析
        {
          test: /\.css/,
          include: [
            path.resolve(__dirname, 'src'),
          ],
          use: [
            'style-loader',
            'css-loader',
          ],
        }, 
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              // loader: 'file-loader',
              loader: 'url-loader?limit=1024&name=./images/[name].[ext]'//这个会把你打出来的包 放在dist的image下面
            },
          ],
        },
        {test: /\.js$/,exclude: /(node_modules)/,use: "babel-loader"},
        // {
        //   test: /\.css$/,
        //   use: ["style-loader", "css-loader", "postcss-loader"]
        // },
     // HTML中的图片
    //  {
    //   test: /\.(htm|html)$/i,
    //   use: ['html-withimg-loader']
    // },
      ],
       
    },
    // resolve:{
    //   alias:{
    //     images: path.resolve(__dirname, 'src/images')
    //   }
    // },
    devServer: {
      //设置基本结构
      // contentBase: path.resolve(__dirname, './dist'),
      contentBase: path.resolve(__dirname, './src/'),//这个很关键他是决定打开文件之后从那个页面座位主页面
      host: 'localhost',//服务器IP地址,可以是localhost
      compress: true,//服务端压缩是否开启
      open: true,// 自动打开浏览器
      hot: true ,// 开启热更新 
    }

}