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

  • 相关阅读:
    笨方法学python中执行argv提示ValueError: not enough values to unpack (expected 4, got 1)
    VMware workstation安装
    Redis bigkey分析
    MySQL drop table 影响及过程
    MySQL 大表硬连接删除
    ES elasticsearch 各种查询
    ES elasticsearch 各种聚合
    ES elasticsearch 聚合统计
    ES elasticsearch 实现 count单字段,分组取前多少位,以地理位置中心进行统计
    MySQL行溢出、varchar最多能存多少字符
  • 原文地址:https://www.cnblogs.com/shenjp/p/6593713.html
Copyright © 2011-2022 走看看