zoukankan      html  css  js  c++  java
  • 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"]}

  • 相关阅读:
    MySQL Error--存储inode用完后报设备没有空间
    MySQL Binlog--基于ROW模式的binlog event大小限制
    MySQL Transaction--网络丢包导致长时间未提交事务
    java核心技术第四篇之JDBC第二篇
    java核心技术第三篇之JDBC第一篇
    java核心技术第二篇之数据库SQL语法
    JVM垃圾回收器原理及使用介绍
    JVM中优化指南
    MySQL常用工具、日志及读写分离
    java基础第十九篇之Xml
  • 原文地址:https://www.cnblogs.com/shenjp/p/6593713.html
Copyright © 2011-2022 走看看