zoukankan      html  css  js  c++  java
  • 大前端搭建时常用的一些命令

      cnpm install --save *****     //安装一个脚手架运行需要的中间件

           cnpm install --save-dev ****    //安装一个开发过程中依赖的中间件

      rm -r -f **** //强制删除一个文件夹,多用于删除node_modules目录

      webpack  //打包的指令

      webpack-dev-server --open //启动测试服务,并打开浏览器

    webpack常用的配置如下:

    var path = require('path');
    
    const config = {
        entry: "./src/index.tsx",
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, "dist"),
            publicPath: "dist"
        },
        devtool: 'source-map',
        mode: 'production', // 'production',//development
        resolve: {
            extensions: [".ts", ".tsx", ".js"]
        },
        module: {
            rules: [{
                    test: /.js$/,
                    enforce: 'pre',
                    exclude: /node_modules/,
                    loader: 'source-map-loader'
                },
                {
                    test: /.css$/,
                    exclude: /node_modules/,
                    use: ['style-loader', 'css-loader'],
                    exclude: /antd/dist/
                },
                {
                    test: /.less$/,
                    exclude: /node_modules/,
                    use: [{
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'less-loader',
                            options: {
                                importLoaders: 1,
                                javascriptEnabled: true
                            }
                        }
                    ]
                },
                {
                    test: /.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/
                },
                {
                    // 小于8KB的图片使用base64内联
                    test: /.(png|jpg)$/,
                    exclude: /node_modules/,
                    loader: 'url-loader?limit=8192&name=/img/[hash].[name].[ext]'
                },
                {
                    test: /.(eot|woff|ttf|svg)$/,
                    exclude: /node_modules/,
                    loader: "file-loader?name=/iconfont/[hash].[ext]"
                },
                {
                    test: /.(js)$/,
                    exclude: /node_modules/,
                    loader: "file-loader?name=/js/[name].[ext]"
                }
            ]
        },
        devServer: {
            port: 9001,
            watchContentBase: true
        },
        externals: { //将react等中间件不打包到bundle中,开发中间件用
            // 'react': 'React',
            // 'react-dom': 'ReactDOM',
            // 'antd': 'antd'
        }
    };
    module.exports = config;
    

      

  • 相关阅读:
    Windows与Linux端口占用查询及处理
    mysql的五种日期和时间类型【转载】
    MongoDB的管理
    在MongoDB中执行查询、创建索引
    MongoDB文档的基本操作
    Codeforces Round #504 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final) ABCD
    CNN卷积神经网络
    hdu6406 Taotao Picks Apples 多校第8场1010
    hdu6397 Character Encoding 多校第8场1001
    梯度下降和反向传播
  • 原文地址:https://www.cnblogs.com/janken/p/11369370.html
Copyright © 2011-2022 走看看