2024年webpack快速入门和实战_webpack entry 相互依赖(1)，2024年最新大厂面试必备常识

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这张图基本上解释了webpack是用来干嘛的，将一些相互依赖的模块(文件)，打包成一个或多个js文件，减少http请求次数，提升性能。这些相互依赖的模块可以是图片、字体、coffee文件、样式文件、less文件等。

1、 安装

先安装

install node.js
node.js包含一个包管理器：npm

基本命令

      webpack         // 最基本的启动webpack的方法
      webpack -w      // 提供watch方法；实时进行打包更新
      webpack -p      // 对打包后的文件进行压缩
      webpack -d      // 提供source map，方便调式代码

全局安装

 # npm install webpack -g

项目安装：

最好在工程中使用webpack，让webpack作为工程的依赖。这样你就能自己选择一个本地的webpack版本，不会强制使用全局的。

  # 进入项目目录
  # 确定已经有 package.json，没有就通过 npm init 创建
  # 安装 webpack 依赖
  # npm install webpack --save-dev

2、如何使用

使用ES6

安装 babel-loader： 
# npm install babel-loader --save-dev
安装转码规则：       
# npm install babel-preset-es2015 --save-dev
ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
# npm install --save-dev babel-preset-stage-0
# npm install --save-dev babel-preset-stage-1
# npm install --save-dev babel-preset-stage-2
# npm install --save-dev babel-preset-stage-3
参考格式：
{
    test: /\.js$/,
    loader: 'babel?presets[]=es2015,presets[]=stage-0'
}

编译css

    安装css-loader：  
    # npm install css-loader --save-dev
    安装style-loader  
    # npm install style-loader --save-dev
    参考格式：
    {
        test: /\.css$/,
        loaders: ['style', 'css', 'autoprefixer']
    }

编译less

    # npm install less --save-dev
    安装less-loader： 
    # npm install less-loader --save-dev
    参考格式：
    {
 test: /\.less/,
 loaders: ['style', 'css', 'autoprefixer', 'less'],
 }

使用autoprefixer自动补上浏览器兼容

    # npm install autoprefixer-loader --save-dev
    参考格式：
    {
 test: /\.css$/,
 loaders: ['style', 'css', 'autoprefixer']
 }, {
 test: /\.less/,
 loaders: ['style', 'css', 'autoprefixer', 'less'],
 }

编译文件

    安装file-loader： 
    # npm install file-loader --save-dev
    参考格式：
    {
 test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
 loader: 'file-loader?name=[hash].[ext]'
 }

编译图片

    # npm install url-loader --save-dev
    参考格式：
    {
 test: /\.(png|jpg)$/,
 loader: 'url?limit=1200&name=[hash].[ext]'
 }

编译JSX

    # npm install jsx-loader --save-dev
    # npm install babel-preset-react --save-dev
    参考格式：
    {
    test: /\.jsx$/,
    loaders: ['jsx', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react']
    }

示例源码

在项目目录下，新建一个webpack.config.js文件，把下面代码复制进去，然后在新建一个app.js和index.js文件，写上console.log(‘你好世界’);

执行命令：webpack 然后找到build目录就看到编译后的文件了

    var webpack = require('webpack');

    module.exports = {
      entry: {
          app: './app', //编译的入口文件
          index: './index', //编译的入口文件
      },
      output: {
          publicPath: '/build/', //服务器根路径
          path: './build', //编译到当前目录
          filename: '[name].js' //编译后的文件名字
      },
      module: {
          loaders: [{
                  test: /\.js$/,
                  loader: 'babel?presets=es2015'
              }, {
                  test: /\.css$/,
                  loaders: ['style', 'css', 'autoprefixer']
              }, {
                  test: /\.less/,
                  loaders: ['style', 'css', 'autoprefixer', 'less'],
              }, {
                  test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
                  loader: 'file-loader?name=[hash].[ext]'
              }, {
                  test: /\.(png|jpg)$/,
                  loader: 'url?limit=1200&name=[hash].[ext]' //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
              }
          ]
      },
      plugins: [
              new webpack.optimize.CommonsChunkPlugin('common.js') //将公用模块，打包进common.js
      ],
      resolve: {
          extensions: ['', '.js', '.jsx'] //后缀名自动补全
      }
    };

plugins:可以使用插件讲几个公共模块加载到common.js中，这样就就可以更好的维护代码，但是要注意的是：

3. 详细讲解

webpack.config.js文件通常放在项目的根目录中，它本身也是一个标准的Commonjs规范的模块。在导出的配置对象中有几个关键的参数：

1.entry

entry可以是个字符串或数组或者是对象。

当entry是个字符串的时候，用来定义入口文件：

     entry: './js/main.js'

当entry是个数组的时候，里面同样包含入口js文件，另外一个参数可以是用来配置webpack提供的一个静态资源服务器，webpack- dev-server。webpack-dev-server会监控项目中每一个文件的变化，实时的进行构建，并且自动刷新页面：

     entry: [
         'webpack/hot/only-dev-server',
         './js/app.js'
     ]

当entry是个对象的时候，我们可以将不同的文件构建成不同的文件，按需使用，比如在我的hello页面中只要``引入hello.js即可：

     entry: {


### 学习笔记

主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

>**HTML/CSS**

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

![](https://img-blog.csdnimg.cn/img_convert/b9361966787a04871205aa9785ab5bd6.webp?x-oss-process=image/format,png)

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

![](https://img-blog.csdnimg.cn/img_convert/570cf8efd19637a75edac2bfd9ece354.webp?x-oss-process=image/format,png)

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

![](https://img-blog.csdnimg.cn/img_convert/fbeeeb5d8c05df7d8b97bdd895cd4555.webp?x-oss-process=image/format,png)

3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中...(img-7zyxvdlQ-1715361829030)]

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中...(img-GdNBhmrs-1715361829031)]