1.定位到创建的目录

cd H:\webpacktest

2.初始化:

npm init

3.一路回车

4.执行(安装到项目的依赖项中)

npm install webpack --save-dev

  注意:文件夹千万不要命名为webpack

如果报这个错误:

执行删除命令:重新安装

npm remove npm

  重新命名文件夹:webpacktest

npm install css-loader style-loader --save-dev

安装到全局环境的命令:

npm install webpack -g

 只有安装到全局变量中才能执行编译命令

打包命令:

webpack entry.js bundle.js

  打包成功显示的内容:

打包文件夹中的内容:

打包css文件报错:

安装css-loader

npm install css-loader style-loader --save-dev

引入css的语法:

require('css-loader!./style.css')

引入style的语法:

require('style-loader!css-loader!./style.css')

直接在命令行中绑定:

webpack hello.js bundle.js --module-bind 'css=style-loader!css-loader'

自动打包参数:

webpack hello.js bundle.js --watch

查看打包的过程:

webpack hello.js bundle.js --progress --display-modules

在package.json中添加:

 "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reason"

 运行

npm run webpack

中文文档:

https://doc.webpack-china.org/configuration/

 

  

 

  

 

Webpack安装和命令的更多相关文章

  1. webpack 介绍 & 安装 & 常用命令

    webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...

  2. webpack学习(一):webpack 介绍&安装&常用命令

    一.简单介绍 什么是Webpack Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 主要是用来打包在浏览器端使用的ja ...

  3. webpack介绍 安装 常用命令

    Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...

  4. webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误

    一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...

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

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

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

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

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

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

  8. webpack安装配置

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

  9. 前端自动化构建工具webpack (一)之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

随机推荐

  1. UVALive - 7639 G - Extreme XOR Sum(思维)

    题目链接 题意 给出一个序列,相邻两两异或,生成一个新序列,再相邻两两异或,直到只剩下一个元素,问最后结果为多少.m个查询,每次都有一个待查询区间. 分析 既然有多组查询,n只是1e4,那么可以考虑预 ...

  2. error: control may reach end of non-void function [-Werror,-Wreturn-type]

    编译出现如下错误 error: control may reach end of non-void function [-Werror,-Wreturn-type] 这个错误可能和编译器有关(在相同代 ...

  3. JAVA求解全排列

    一,问题描述 给定一个字符串,求出该字符串的全排列. 比如:"abc"的全排列是:abc.acb.bac.bca.cab.cba 二,实现思路 采用递归的方式求解.每次先选定一个字 ...

  4. Swift下使用Xib设计界面

    虽然Swift可以纯代码设计界面,不过不利用现有的可视化工具有时候有点效率低.下面是使用xib设计方法,部分代码来自网上. (1)新建View 2.新建View class 3.DemoView.sw ...

  5. Github安全整理(转载)

    刚好这两天对之前github上关注的一些比较有意思的项目进行了一下分类整理,在这里列出来分享给大家,希望能对大家寻找工具或者资源有所帮助. 大部分Repo是关于安全以及Python的,也有一些其他主题 ...

  6. Elastic Job入门(2) - 使用

    运维平台 elastic-job-lite-console-${version}.tar.gz可通过mvn install编译获取,下载源码,进入console目录,执行: mvn clean ins ...

  7. 重新看halcon模板匹配

    工业中模板匹配有很多需求. 代码如下: read_image (Image, 'J:/测试图片/test1/1.bmp') get_image_size (Image, Width, Height) ...

  8. 2017-2018-2 165X 『Java程序设计』课程每周成绩公布

    2017-2018-2 165X 『Java程序设计』课程 每周成绩公布 本博客将跟随教学进度不定期更新,每次更新后将在课程群公布.如对成绩有疑问,请于公布成绩后的1天之内联系助教,进行审核确认. - ...

  9. Dubbo监控中心

    (1).dubbo-admin(管理控制台) 1).从https://github.com/apache/incubator-dubbo-ops下载解压 2).修改dubbo-admin配置文件中zo ...

  10. Spring-boot:快速搭建微框架服务

    前言: Spring Boot是为了简化Spring应用的创建.运行.调试.部署等而出现的,使用它可以做到专注于Spring应用的开发,而无需过多关注XML的配置. 简单来说,它提供了一堆依赖打包,并 ...