首先进行全局安装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. DDD创始人Eric Vans:要实现DDD原始意图,必须CQRS+Event Sourcing架构

    http://www.infoq.com/interviews/Technology-Influences-DDD# 要实现DDD(domain drive  design 领域驱动设计)原始意图,必 ...

  2. 私有云存储搭建(owncloud)

    第一步.搭建LAMP(基于linux7.1.1503) 1 配置yum(网络加本地,下面为网络) [vault.centos.org_7.1.1503_os_x86_64_] name=added f ...

  3. Hibernate调用带有输入参数,输出参数为cursor的存储过程

    一.Oracle创建表及存储过程 1.创建表T_MONITOR_DEVICE 创建后的表结构 2.创建存储过程 create or replace procedure ProcTestNew(v_mo ...

  4. linux c语言定时器

    原文来自于:http://hi.baidu.com/opetrhsxszbckzd/item/126966cae5f9524aa9ba94f5 我只是把其重新排版标注一下. linux c语言定时器 ...

  5. 调用win32 api 函数SendMessage() 实现消息直接调用

    简单的调用例子, 适合初学者学习,当然 我也是初学者. #include <windows.h> #include <stdio.h> #include <stdlib. ...

  6. VS编辑器主题变换插件-EasyVS

    主题功能是这个版本的亮点. 我收集了七个比较流行的编辑器主题样式,有了这个功能再也不用到网上寻找安装这样那样的主题了. 增加文件右键“在资源管理器中打开”功能 我们知道VS2010对文件夹支持“在资源 ...

  7. Xcode插件失效解决办法

    升级完Xcode突然间发现之前安装的所有插件都不生效了,费了九牛二虎之力找到了解决办法...      1.打开终端,输入以下代码获取到DVTPlugInCompatibilityUUID       ...

  8. 丢掉Mask遮罩,更好的圆形Image组件[Unity]

    写在前面 全文解析圆形Image组件的实现原理,取关键代码介绍算法细节,源码已经上传Github下载地址,欢迎下载试用. 一.Unity原生Image组件实现圆形图片的缺陷 Mask渲染消耗 许多游戏 ...

  9. JQuery和Ajax在ASP.NET MVC中的基本应用

    当我们在开发Web应用程序中使用JQuery和Ajax异步调用来实现很多功能时,不仅提高了程序的性能,而且给用户一个更好的交互式界面操作体验.接下来我们依旧用简单的实例来学习下它们的应用. 创建一个A ...

  10. android保存照片到相册的一些事

    由于最近工作需求的原因,有一个功能就是将webView里面的照片保存到本地,并且能够直接在相册中有一个及时的反馈. 项目中,具体是实现流程是这样的设计webview点击交互事件,当点击webview中 ...