日常学习之webpack①

今天尝试着写一下webpack，不知道写的时候会不会把自己绕进去。如果有错误的地方还请大家指正。谢谢阅读的朋友。
一、认识webpack
1.1 定义：前端自动化构建工具，基于Node.js开发。
1.2 针对问题：解决引入静态资源的合并、打包、压缩、混淆等问题。
1.3 如果不使用自动化构建工具会有什么问题：
① 网页加载速度慢。
② 要处理很多包与包之间的依赖关系。
二、webpack的安装
2.1 安装方式：
① 全局安装：npm install webpack -g
② 安装到项目依赖中：在项目根目录下运行 npm install webpack --save-dev
注意：webpack4，需要同时安装webpack-cli。
2.2 创建项目目录：node-modules文件夹是安装webpack时生成的，不用手动添加。需手动添加的已经用红色线条标出
在这里插入图片描述

安装完成后，使用npx webpack 进行打包。然后会在项目目录dist文件下生成main.js压缩文件。
在这里插入图片描述
2.3 代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"> 
    <title>webpack学习</title>  
     <!-- 引入刚才打包生成的main.js文件 -->
    <script src="../dist/main.js"></script>
  </head>
  <body>
  </body>
</html>

console.log('这次能行')

打印结果：
在这里插入图片描述 三、手动配置webpack
3.1 新建配置文件：/src/webpack.config.js（注意：在这之前请先将刚才手动创建dist文件夹删掉。）
3.2 配置内容：

let path = require('path ')
module.exports = {
  mode: 'development', // production or development
  entry: './src/index.js', // 入口文件
  output: {
    filename:'main.js', // 打包之后的文件名称
    path: path.join(__dirname, 'dist') 
    }
}

3.3 目录结构:
在这里插入图片描述
3.4 代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"> 
    <title>webpack学习</title>  
    <!-- 引入刚才打包生成的main.js文件 -->
    <script src="../dist/main.js"> </script>
  </head>
  <body>
  </body>
</html>

console.log('这次也可以打出来')

3.5 打印结果

在这里插入图片描述
4、手动配置webpack内置服务
此时页面启动的时候，还不能通过loaclhost启动。webpack有一个内置的通过express实现的开发服务。我们可以安装它，并且配置相关内容，就可以实现通过localhost来访问页面了。它的好处是，它不会真正的去打包，而是在内存中生成一个打包。
4.1 安装： npm install webpack-dev-server -D (注意：这个大写的D说明是开发时的依赖)
4.2 package.json配置：
在这里插入图片描述
4.3 webpack.config.js配置：

运行：npm run dev

5、手动配置html模板：
5.1 安装：npm install html-webpack-plugin -D

5.2 webpack.config.js配置：

6、手动配置css
6.1 安装loader
npm install css-loader style-loader less-loader
6.2 webpack.config.js配置：

module: {
    rules: [ // 规则 
      // loader执行顺序：默认从右向左，从下向上
      {
        test: /\.less$/,
        use:[
          {
            loader: 'style-loader',
            options:{
              insertAt: 'bottom'
            }
          },
          'css-loader',
          'less-loader'
        ]},
    ]
  }

新建index.css文件

body  {
  background-color: pink;
}

index.js引入css

require('./index.css')

6.3 执行npm run dev

写到这，我已经把自己写糊涂了，后面的内容，我自己再屡屡，我不知道大家能不能看的明白。如果有错误的地方，欢迎大家指正，共同进步。

日常学习之webpack①

猜你喜欢