首先进行全局安装webpack

npm install -g webpack
cmd跳转到项目的文件夹，安装webpack

npm install --save-dev webpack
接着需要packjson.js文件，全部enter掉就好了，默认值就行了

npm init
接着在项目文件夹接着安装，css-loader 和 style-loader处理样式表

npm install --save-dev style-loader css-loader
安装css中图片的loader和svg的依赖

npm url-loader svg-url-loader --save-dev
在项目文件夹新建webpack.config.js，我的内容如下

var webpack = require('webpack')

module.exports = {

entry: __dirname+'/js/entry.js',

output: {

path: __dirname+'/js',

filename: 'bundle.js',

publicPath: 'http://localhost:8080/js/' //启动本地服务后的根目录

},

module: {

loaders: [

{

test: /\.css$/, loader: 'style!css'},

{test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},

{test: /\.svg/, loader: 'svg-url-loader'}

{

test: /\.js$/, // 匹配.js文件，如果通过则使用下面的loader

exclude: /node_modules/, // 排除node_modules文件夹

loader: 'babel' // 使用babel（babel-loader的简写）作为loader

}

]

},

　　resolve: {

　　alias: {

　　 'vue$': 'vue/dist/vue.common.js'

　　 }

　　},

devServer: {

colors: true,//终端中输出结果为彩色

historyApiFallback: true,//不跳转

inline: true,//实时刷新

port:8080

}

}

在项目文件夹下的js文件夹里新建一个entry.js，我的内容如下

require('./../css/style.css'); // 载入 style.css
require('./index.js');//载入自身想要用的js
输出的网页的内容index.html，如下

<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="js/bundle.js"></script>
</body>
</html>
1、最后在命令行cmd中输入webpack就可以自动打包了（但是要记得始终要在原始目录下）

2、或者开启本地服务器，自动刷新打包

安装本地服务器

npm install webpack-dev-server --save-dev
在命令行cmd输入webpack-dev-server 就可以了，然后输入

http://localhost:8080/index.html就可以连接你的本地服务器了

以下自行研究得出的vue+vueRouter+v-tap（点击取消延迟）的方法

首先自行安装本地vue

npm install vue --save-dev
接着安装本地vueRouter

npm install vue-router --save-dev
再接着安装v-tap

npm install v-tap --save-dev
如果你这个js要应用vue或者VueRouter或者v-tap，就在前面先注入这个模板

var Vue = require("vue");

var VueRouter = require("vue-router");
Vue.use(VueRouter);

ar vueTap = require('v-tap');
Vue.use(vueTap);
补充内容:使用es6.

首先全局安装babel

npm install -g babel-cli
在安装在本地

npm install --save babel-preset-es2015
然后在cmd命令行创建只有后缀.babelrc的文件

type nul>.babelrc
文件里面输入

1
{"presets": ["es2015"]}

webpack 打包js和css的更多相关文章

  1. webpack打包js，css和图片

    1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...

  2. 关于webpack打包js和css

    废话不多说,直接贴出代码,大家瞅瞅:其中要引用css的话是要用css-loader.用了之后再webpack.config.js里面配置相应的代码,并且在相应的js文件里面引用即可啦,不知道有哪位大神 ...

  3. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  4. webpack打包js文件

    当输入 webpack 输入指令 npm run dev  后会自动启动一个浏览器 需要借鉴插件 open-browser-webpack-plugin 下载:npm install open-bro ...

  5. vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题

    .bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg ...

  6. webpack——打包JS

    1.在文件中打开命令行,输入code ./    (我的编译器是vs code) 2.然后会弹出编译器,在编译器内新建js文件app,sum app.js import sum from './sum ...

  7. 解决Windows和Linux使用npm打包js和css文件不同的问题

    1.问题出现 最近公司上线前端H5页面,使用npm打包,特别奇怪的是每次打包发现css和js文件与Windows下打包不一致(网页使用Windows环境开发),导致前端页面功能不正常. 2.问题排查 ...

  8. 使用webpack打包css和js

    1.安装webpack. npm install webpack -g 2.创建一个文件夹app. 3.新建文件test.js. require("!style-loader!css-loa ...

  9. 走近webpack（4）--css相关拓展

    我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用we ...

随机推荐

  1. Jcompress: 一款基于huffman编码和最小堆的压缩、解压缩小程序

    前言 最近基于huffman编码和最小堆排序算法实现了一个压缩.解压缩的小程序.其源代码已经上传到github上面: Jcompress下载地址 .在本人的github上面有一个叫Utility的re ...

  2. Bezier（贝塞尔）曲线简介

    在计算机图形学中,Bezier曲线被广泛用于对平滑的曲线进行建模,对其有适当的了解是必要的.一条Bezier曲线由一系列控制点定义,称为曲线的阶数,由此可知,使用两个控制点()可以定义一条一阶Bezi ...

  3. 浅谈时间复杂度- 算法衡量标准Big O

    写在前面: 今天有一场考试,考到了Big-O的知识点,考到了一道原题,原题的答案我记住了,但实际题目有一些改动导致答案有所改动,为此作者决定重新整理一下复杂度相关知识点 Efficiency and ...

  4. HDU 2520 我是菜鸟，我怕谁

    我是菜鸟,我怕谁 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  5. 毕向东udp学习笔记3多线程聊天

    项目功能: 实现了多线程下的发送接收,比较好 希望可以加入GUI,类似聊天软件一样,有一个消息输入框,捕获输入消息,作为发送线程 有一个显示消息框,接收消息并显示,作为接收线程 不知道的是,当在线程中 ...

  6. (转)java二维数组的深度学习（静态与动态）

    转自:http://developer.51cto.com/art/200906/128274.htm,谢谢 初始化: 1.动态初始化:数组定义与为数组分配空间和赋值的操作分开进行:2.静态初始化:在 ...

  7. ES(二): Build ES Cluster on Azure VM

    目录: 系统环境准备 安装ES集群 安装Kibana 安装x-pack 安装head 系统环境准备 参见: HDP2.4安装(二):Centos7配置 修改network: 修改hosts: 配置ss ...

  8. Omi实战-QQ附近用户列表Web页

    原文地址https://github.com/AlloyTeam/omi/blob/master/docs/cn_pr_nearby.md 写在前面 Omi很适合大型复杂的Web页面开发,例如一些We ...

  9. 【排序算法】归并排序算法 Java实现

    归并排序是建立在归并操作上的一种有效的排序算法.该算法是采用分治法(Divide and Conquer)的一个非常典型的应用. 基本思想 可以将一组数组分成A,B两组 依次类推,当分出来的小组只有一 ...

  10. django-查询语句(一)

    1.model 假设我们的model如下: 某个JobType下有很多Job. class JobType(models.Model): name = models.CharField(max_len ...