01---webpack的基础篇

最新推荐文章于 2024-11-03 23:35:40 发布

h960822

最新推荐文章于 2024-11-03 23:35:40 发布

阅读量413

点赞数 1

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/h960822/article/details/137356466

版权

本文详细介绍了Webpack构建工具的作用，包括转码ES6+语法、处理jsx、CSS前缀处理、压缩代码等。讲解了Webpack配置文件结构，环境安装步骤，以及如何创建项目并执行基本打包流程，还提到了简化打包命令的方法。

摘要由CSDN通过智能技术生成

01 为什么需要webpack构建工具？

需要转化ES6及以上的语法，因为低版本浏览器不支持ES6及以上的语法

需要转化jsx的语法等

需要补齐css的前缀，因为不同浏览器对于css样式的兼容不同需要加前缀，以及预处理器。

压缩混淆，压缩代码 图片等。

02 初始webpack：配置文件的名称

webpack默认的配置文件是 webpack.config.js文件

可以通过webpack --config 指定配置文件

03 webpack的配置组成

module.exports = {
        
                entry:'./src/index.js',   @1 打包的入口文件

                output:'./dist/main.js',  @2 打包的出口文件

                mode:'production',      @3 环境

                module:{

                        rules:[ {test:/\.txt$/, use:'raw-loader'} ]  @4 解析的loader
                },

                plugins:[    @5 插件配置
                        
                        new HtmlwebpackPlugin({  

                                template:'/src/index.html'
                        })
                ]
}

04 webpack环境的安装

第一步 打开终端安装nvm：通过curl安装执行命令如下：

       curl -o- https://raw.githubusercontent.com/nvm/v0.34.0/install.sh | bash

第二步 将nvm添加到环境变量中去：执行如下的代码

       soure ~/.bash_profile

第三步 检测nvm是否安装成功：执行如下命令

       nvm list 可以查看到已经安装的node的版本

第四步 安装node.js:执行如下的代码

       nvm install v10.15.3 ； 对应的node.js的版本号；

05 创建初始的项目并按照webpack和webpack-cli；

终端执行：mkdir mv-project;  创建了mv-project的目录

进入目录：cd mv-project

初始化项目： npm init -y

安装webpack和webpack-cli: npm install webpack webpack-cli --save-dev

查看webpack安装的版本终端中执行： ./node_modules/.bin/webpack -v

上面的代码相当于在执行webpack这个打包工具。

06 简单的列子来看webpack的打包流程：

第一步创建webpack.config.js配置文件及相关脚本

const path = require('path')

module.exports = {

    mode:'production',

    entry:'./src/index.js',

    output:{

        path:path.resolve(__dirname,'dist'),


        filename:'bundle.js'
    }

}

第二步需要在项目的跟目录下创建src目录以及index.js，hello.js文件

hello.js文件代码如下：

export const hello = ()=>{

    return  'hello webpack'

}

index.js文件的代码如下：

import {hello} from './hello.js'

document.write(hello())

console.log(hello())

第三步执行打包的命令：在终端中执行如下命令：

./node_modules/.bin/webpack

第四步打包的结果会在项目的根目录中创建一个dist目录并有一个bundle.js文件

同时需要创建index.html文件导入webpack打包生成的dist目录下的bundle.js的文件

<HTML>

    <head>

        <body>

            <script src='./dist/bundle.js'></scrit>
        
        </body>
        
    </head>

</Html>

07 简化./node_modules/bin/webpack打包的命令：通过npm run build进行打包

在package.json文件中：scripts对象中创建执行webpack脚本的命令：

原理：模板局部安装会在node_modules/.bin目录下创建软连接

{
  "name": "vue2code",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "build": "webpack",
  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {
       
  }
}