前端webpack初识（marksehng）

旧城等待， 2022-11-15 03:48 176阅读 0赞

# 安装步骤     #

**1**.npm init               npm init -y    //没有过程选择

**2**.安装`webpack webpack-cli`。`cli`是可以让我们在命令行中使用`webpack`。

npm install webpack webnpm pack-cli -D

`3.npx`指令会从当前目录中查找`webpack`

npx webpack -v    //查找当前目录的webpack版本  
npm webpack -v    //查找全局目录的webpack版本

**4**.查找包版本

npm info 包名

**5**.添加一些基本`js`文件(简单命令：px webpack   ./文件名)

**路径要写对**

**6**.翻译不方便，所以添加`webpack.config.js`配置文件，并且做基本的配置。

const path = require('path');
    
    entry: {
        //名字随便添加
        main: './index.js',	//入口文件
    },    //打包入口
    //输出目录
    output: {
        chunkFilename: '[name].chunk.js',	//非入口文件名称
        // publicPath: 'scripts/',  //在页面引用js的时候在前面加上这个路径
        filename: '[name].js',  //生成的文件名，[name]是在entry中定义的key值，也可以使用[hash]占位符
        path: path.resolve(__dirname, '../dist') //打包路径，__dirname是webpack.config.js这个文件所处的文件夹
    }
    
    现在可以通过如下命令来进行打包。
    
    
    npx webpack --config ./webpack.config.js
    npx webpack	//可以省去后面的--config配置，因为会自动识webpack.config.js配置文件
    
    为了万一使用`npm webpack`使用全局`webpack`打包并且规范化，所以需要将这个指令添加至`package.json`里的`scripts`中。
    
    "scripts": {
      "build": "webpack"
    }
    
    
    最后可以使用`npm run build`命令来运行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 1][] 标题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70]: /images/20221022/ba89ff0dd3bb4e8890fcfe13926f4b23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 1]: /images/20221022/a8a1e529a2c847dbac621b6217bd0bdd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDMwMjQ3_size_16_color_FFFFFF_t_70 2]: /images/20221022/82d9ef46cf69470ab665374f81b5a233.png