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;
    

      

  • 相关阅读:
    MySQL 8.0+ 时区问题
    SSM框架整合搭建流程
    最大子段和、最大子矩阵和
    棋盘覆盖(分治)
    石子合并问题
    矩阵连乘
    selenium完成滑块验证
    背包问题(2)
    背包问题(1)
    皇后问题
  • 原文地址:https://www.cnblogs.com/janken/p/11369370.html
Copyright © 2011-2022 走看看