webpack 打包js和css
首先进行全局安装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的更多相关文章
- webpack打包js，css和图片
1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...
- 关于webpack打包js和css
废话不多说,直接贴出代码,大家瞅瞅:其中要引用css的话是要用css-loader.用了之后再webpack.config.js里面配置相应的代码,并且在相应的js文件里面引用即可啦,不知道有哪位大神 ...
- 使用webpack打包js文件(隔行变色案例)
使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...
- webpack打包js文件
当输入 webpack 输入指令 npm run dev 后会自动启动一个浏览器 需要借鉴插件 open-browser-webpack-plugin 下载:npm install open-bro ...
- vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题
.bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg ...
- webpack——打包JS
1.在文件中打开命令行,输入code ./ (我的编译器是vs code) 2.然后会弹出编译器,在编译器内新建js文件app,sum app.js import sum from './sum ...
- 解决Windows和Linux使用npm打包js和css文件不同的问题
1.问题出现 最近公司上线前端H5页面,使用npm打包,特别奇怪的是每次打包发现css和js文件与Windows下打包不一致(网页使用Windows环境开发),导致前端页面功能不正常. 2.问题排查 ...
- 使用webpack打包css和js
1.安装webpack. npm install webpack -g 2.创建一个文件夹app. 3.新建文件test.js. require("!style-loader!css-loa ...
- 走近webpack（4）--css相关拓展
我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用we ...
随机推荐
- ADO.NET高级应用
ADO.NET事务处理(4个步骤) 1.调用SqlConnection对象的BeginTransaction()方法,创建一个SqlTransaction对象,标志事务开始. 2.将创建的SqlTra ...
- 游戏音频技术备忘 （五）Wwise Unreal Engine 集成代码浅析 二
AkAmbientSound类的实现 Unreal Engine提供了一个基本对象的构造器ObjectInitializer,一般来说用户创建的类总是拥有很多变量,因此 AkAmbientSound ...
- 如何用JS/HTML将时间戳转换为“xx天前”的形式【附源码，转
如果我们有一份过去时间戳,如何使用JS/HTML将时间戳转换为"xx天前"的形式呢,以下是完整代码 <!DOCTYPE html> <html> <h ...
- php数组排序
sort() - 以升序对数组排序rsort() - 以降序对数组排序asort() - 根据值,以升序对关联数组进行排序ksort() - 根据键,以升序对关联数组进行排序arsort() - 根据 ...
- git命令实战之血泪记录
注意: 本文章所写所有命令均在Git命令行窗口执行!非cmd窗口! 打开git命令行窗口步骤为:到项目根目录下执行bash命令行操作:右键点击Git Bash Here菜单,打开git命令窗口,不是c ...
- php测试题 知识点整理
1 SQL语句的整理: insert into+表名+values +(添加的内容 ) 例: insert into users values ('p001','张三','男'); 修改: upd ...
- Spring的bean管理（注解）
前端时间总是用配置文件 内容太多 下面认识一下注解 注解是什么? 1代码里面的特殊标记,使用注解可以完成功能 2注解写法@XXX 3使用注解可以少些很多配置文件 Spring注解开发准备 注解创建准 ...
- IntelliJ IDEA 2016.1.4 git 切换分支详解
参考网址: http://cache.baiducontent.com/c?m=9d78d513d9981de90fb3ca255501d7174202d7743da7c7647ac3e54a8414 ...
- php新建数据库对象 基础知识
数据访问 结合html 数据库 PHP面向对象的方式函数的方式 1建立通道 MySQLi 类通过构造函数造出 连接数据库地址 uesername 连接用户名 passwd dbname port so ...
- Javascript正则表达式（上）
正则表达式一般用于验证客户端的用户输入,而服务器端的PHP.ASP.NET等脚本无须再进行验证,节约了后台开销. 1.两种创建方法 var box=new RegExp("Box" ...