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"]}

posted on 2017-03-21 12:28  sjpqy  阅读(502)  评论(2编辑  收藏  举报

导航