webpack安装

一、webpack安装和命令行

  打开cmd命令行,新建一个webpack-test文件夹,然后进入该文件夹中。

mkdir webpack-test
cd webpack-test

  进行初始化。(之后会出现一系列提问,可一直按回车键直至完成)

npm init

  开始安装webpack。

npm install webpack --save-dev

  在webpack-test文件夹下新建hello.js文件。用编辑器打开进行编码。

function hello(str) {
    alert(str);
}

  在cmd中对该文件进行打包。(在要打包的文件名后面跟上打包后的文件名)

webpack hello.js hello.bundle.js

  或者:(进行实时监听,当文件内容改变时,不需要再进行打包这一步骤)

webpack hello.js hello.bundle.js --watch

  当需要在hello.js文件中引入css类型文件时,需要安装loader。命令如下:

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

  引入css文件代码如下:

require(‘style-loader!css-loader!./style.css‘)
时间: 2024-11-03 21:07:53

webpack安装的相关文章

nodejs,webpack安装以及初步运用

nodejs安装: 1.下载:https://nodejs.org/en/download/ 2.安装node-v6.11.3-x64.msi文件,直接默认安装(next--): 3.验证是否完成安装:cmd 进入后输入命令 node -v  回车能得到nodejs版本号: 输入node 回车再输入console.log('aaaaa') 回车能正常显示输出. 这表示nodejs安装成功. webpack安装: 1.npm安装:在f盘新建文件夹webpack,在webpack文件夹建文件夹dem

近一周学习之-----vue、webpack安装

1.vue安装 1.1.利用npm install -g vue vue安装完毕 2.webpack安装 npm install webpack -g webpack安装完毕 今天任务大功告成! 接下来利用webpack安装vue脚手架,开始vue学习之旅...

webpack安装配置使用教程详解

webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对于不喜欢使用 jspm测试的朋友可以参考一下. webpack 入门 目录 1 安装 webpack2 初始化项目3 webpack 配置4 自动刷新5 第三方库6 模块化7 打包.构建8 webpack 模板我最近大量使用的是 jspm,但因为用它搭建的前端开发环境中,写测试代码非常困难,而项目又

【JavaScript】 Webpack安装及文件打包

背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已.经过多方调研,终于发现如何实现webpack的文件打包功能. 准备 在使用webpack之前,必须先要安装nodejs和npm. 安装完npm后,由于npm国内访问非常慢,可以设置为从淘宝的镜像下载各种资源包. npm config set registry http://registry.cnpm

webpack安装使用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; min-height: 13.0px } span.s1 { } span.Apple-tab-span { white-space: pre } 1.安装: 首先要安装 Nod

webpack安装与命令行

我们常规直接使用 npm 的形式来安装: npm install webpack -g    将webpack安装到全局变量 然后新建个文件夹,如webpack-test,通过终端进入该文件夹, npm init   初始化package.json  会出现设置json文件到一些设置项,不用填,一路回车就行 完成后会在webpack-test文件夹里生成一个package.json文件 npm install grunt --save-dev 在该文件夹下安装webpack 这时在webpack

webpack安装,常见问题和基本插件使用

一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. 二:webpack安装 安装准备: 1:安装node最新版本 2:安装npm 成功安装后可cmd查看,可以查看版本号则成功了第一步 全局安装: cmd安装 这样安装一般都是最

webpack安装整理

早上有点时间大概安装一下webpack,操作一下顺便把步骤记一下,乱乱的,还是记录一下吧! webpack安装步骤:1. 2. 3.一直回车,出现如下图: 4.创建src和dist文件 5.需要在npm中安装lodash依赖: 6.手动创建index.html文件 手葱创建index.js文件 7.执行命令webpack-cli src/index.js --output dist/bundle.js 执行之后报错: 尝试用还是报错 然后用http://www.runoob.com/w3cnot

webpack 安装卸载

webpack安装: npm install webpack -g //-g 全局 npm install webpack -s //-s 局部 npn install webpack@x.xx -g //x.xx 版本号 webpac卸载: npm uninstall webpack -g npm uninstall webpack -s 当webpack打包的过程中出现一些不明确的问题是可试着删除 node_modules 重新 cnpm install(自己遇到的问题) 原文地址:http