zoukankan      html  css  js  c++  java
  • webpack4.x安装和配置

    一、全局安装webpack

    npm install  webpack -g

    二、创建项目

    我们在合适位置新建一个文件夹wpk-test,用于存放我们的项目。 
    命令行中定位到webpack-test文件夹下,输入以下命令进行项目的初始化:

    npm init

    这里,要求设置很多选项,可以按项目情况配置也可以不填直接回车。完成后,我们发现文件夹中增加了package.json文件,它用于保存关于项目的信息

    三、安装webpack-cli

    我们在项目中本地安装webpack-cli:

    npm install webpack-cli -g

    、创建入口文件

    这表明webpack4.x是以项目根目录下的'./src'作为入口,因此我们在根目录下创建src文件夹,事实上webpack4.x'./src/index.js'作为入口,单单创建src文件而没有index.js文件仍然会报错,因此我们

    hello.js移动到'./src',并重命名为index.js

    打包命令:直接运行webpack --mode development或者webpack --mode production,这样便会默认进行打包,入口文件是'./src/index.js',输出路径是'./dist/main.js',其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。 

    这样便能够实现将'./src/index.js'打包成'./dist/main.js'。 
    不过每次都要输入这个命令,非常麻烦,我们在package.jsonscripts中加入两个成员:

    "dev":"webpack --mode development",
     "build":"webpack --mode production"

    以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development,执行npm run build便相当于执行webpack --mode production。 
    我们在根目录执行:

    npm run dev

    可以看到根目录下生成了dist目录,并且dist目录下生成了main.js文件,main.js文件已经打包了src目录下index.js文件的代码。

    、总结

    配置步骤:

    1、创建工程目录; 
    2、初始化工程目录:npm init。 
    3、全局安装webpack-cli。 
    4、全局安装webpack。 
    5、webpack –mode development或webpack –mode production进行打包,可在package.json中配置dev和build的脚本,便只需运行npm run dev/build,作用相同。 

  • 相关阅读:
    (Vue中)cehart在同一个dom上画图图切换时饼图有折线图的坐标系
    linux(centos7)修改服务器时间
    centos6 yum源不能使用
    Linux 使用 history 来减少重复命令的几个实用技巧。
    7个Shell 拿来就用脚本实例!
    keepalived的配置解析&安装与爬坑
    linux最全命令使用手册
    linux各种误删文件恢复方法(经典强推)
    位运算符
    SQL 书写、执行顺序
  • 原文地址:https://www.cnblogs.com/hitwgs/p/8797843.html
Copyright © 2011-2022 走看看