一, 下载node.js  https://nodejs.org/zh-cn/

二,

  //全局安装 npm install -g webpack

  //npm init 刷新webpack.json 文件

  //安装到你的项目目录 npm install --save-dev webpack

  1, 安装css-loader 和 style-loader

    命令: cnpm install css-loader style-loader

三, webpack 打包

  # {extry file}出填写入口文件的路径,本文中就是上述main.js的路径,

  # {destination for bundled file}处填写打包文件的存放路径

  # 填写路径的时候不用添加{} webpack {entry file} {destination for bundled file}

四, webpack4.0以上版本

  打包js命令: npx webpack index.js --output-filename bundle.js --output-path . --mode development

webpack 安装 打包的更多相关文章

  1. webpack 安装,打包使用

      Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. 全局安装webpack 打开文件夹amd输入指令  npm i webpa ...

  2. 【JavaScript】 Webpack安装及文件打包

    背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...

  3. webpackt入门1:webpack介绍&webpack安装&使用webpack打包

    本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分. 原文地址:入门webpack,看这篇就够了 一.Webpack解决了什么问题 问题1.JavaScript这个脚本化 ...

  4. Webpack 入门(一):安装 / 打包 / 命令行

    一:安装webpack和基本环境搭建 新建一个工作的文件夹(我取的名字叫Webpack) 打开命令行,cd进入该文件夹 //初始化一下npm > E:\work\Webpack>npm i ...

  5. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  6. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  7. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  8. webpack独立打包与缓存处理

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...

  9. webpack安装配置

    webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...

随机推荐

  1. Elasticsearch-基础介绍及索引原理分析(转载)

    最近在参与一个基于Elasticsearch作为底层数据框架提供大数据量(亿级)的实时统计查询的方案设计工作,花了些时间学习Elasticsearch的基础理论知识,整理了一下,希望能对Elastic ...

  2. jetty启动设置端口

    nohup java -jar start.jar jetty.port=10010 命令不能在后台运行,ctrl+c程序就自动停止了,可以在命令后面加个&符号,就可以了 nohup java ...

  3. 一个基于Net 的CMS -- Umbraco CMS

    一个基于Net 的CMS  -- Umbraco CMS:   https://umbraco.com/ Sitecore 和 EPiServer    http://www.bubuko.com/i ...

  4. C++设计模式——桥接模式

    问题描述 现在要去画一个图形,图形有长方形.圆形和扇形等等:而图形又可以加上不同的颜色,然后,我们就可以画出红色的长方形,绿色的长方形:红色的圆形,绿色的圆形等等.而这种图形的形状在变化,图形的颜色也 ...

  5. 【easy】111. Minimum Depth of Binary Tree求二叉树的最小深度

    求二叉树的最小深度: /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; ...

  6. pycharm导入自己写的模块时,模块下方出现红色波浪线的解决方案

    文章链接:https://blog.csdn.net/weixin_38383877/article/details/81121851 这种情况其实可以不用管,是可以正常运行的: 但是,如果看着不舒服 ...

  7. JAVA 求数组中的最大值

    package Code411;//求数组的最大值public class CodeArrayMax { public static void main(String[] args) { int ar ...

  8. ILMerge参考文档

    ILMerge Michael BarnettResearch in Software Engineering (RiSE)Microsoft ResearchCopyright © Microsof ...

  9. Flask开发微电影网站(八)

    1.后台管理之电影预告管理 1.1 定义电影预告表单 在app的admin目录的forms.py文件中,定义电影预告表单 # 预告表单 class PreviewForm(FlaskForm): ti ...

  10. Javascript我学之六对象工厂函数与构造函数

    本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘. 概述 使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法. 然而,除了这两种常用的对象创建方式,JavaScript ...