zoukankan      html  css  js  c++  java
  • webpack的最简单应用,只使用js与css的打包

    1、要确保node的版本是否是最新稳定版

    2、接着需要packjson.js文件,全部enter掉就好了,默认值就行了

    npm init

    3、进行全局安装webpack

    npm install -g webpack

    4、cmd跳转到项目的文件夹,安装webpack

    npm install --save-dev webpack

    5、接着在项目文件夹接着安装,css-loader 和 style-loader处理样式表

    npm install --save-dev style-loader css-loader
    

    6、安装css中图片的loader和svg的依赖

    npm url-loader svg-url-loader --save-dev 

    7、在项目文件夹新建webpack.config.js,我的内容如下

    var webpack = require('webpack');

    module.exports = {
    entry: __dirname+'/js/entry.js',
    output: {
    path: __dirname+'/js',
    filename: 'bundle.js'
    },
    module: {
    loaders: [
    {test: /.css$/,loader: 'style-loader!css-loader'},
    {test: /.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
    {test: /.svg/, loader: 'svg-url-loader'}
    ]
    }
    };

    8、在项目文件夹下的js文件夹里新建一个entry.js,我的内容如下(测试用的)

    require('./../css/style.css'); // 载入 style.css
    require('./index.js');//载入自身想要用的js

    9、输出的网页的内容index.html,如下

    <!-- index.html -->
    <html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      <script src="js/bundle.js"></script>
    </body>
    </html>

    10、最后在命令行cmd中输入webpack就可以自动打包了(但是要记得始终要在原始目录下)

  • 相关阅读:
    ORACLE 使用笔记
    Python资源大全,让你相见恨晚的Python库
    基于python的k-s值计算
    sklearn聚类模型:基于密度的DBSCAN;基于混合高斯模型的GMM
    skearn学习路径
    透彻形象理解核函数
    LDA降维与PCA降维对比
    sklearn 岭回归
    GBDT、XGBOOST、LightGBM对比学习及调参
    sklearn,交叉验证中的分层抽样
  • 原文地址:https://www.cnblogs.com/huangqiming/p/5961506.html
Copyright © 2011-2022 走看看